6.2 Ressources Files
Multimedia resources (images, videos, and audio files) are of great value in contextualizing interactive assessment, creating simulations and small experiments, and designing static and interactive content.
6.2.1 Preparing Image Files
Section 3.10.1 describes supported file formats. As it supports lossless compression, the PNG format (Portable Network Graphics) is often a good choice when preparing image files for designing items with the CBA ItemBuilder.
Some open source tools that might be helpful include:
For CBA ItemBuilder versions prior to Version 10.0, images were suggested to display text with non-web-safe fonts.65 In particular for online deployment (see section 7.2.1), image size can make a difference. If possible, images should be reduced to the required size, and stored as efficiently as possible (for instance, using vector quantization algorithms for PNG images, as provided by pngquant).
How to use transparent images? As shown in Table 3.9, transparency is also supported by the PNG format. To use images in the PNG format with transparent background, the property Is Transparent of the component that will be used within the CBA ItemBuilder to show the image, must be set to true (see Figure 6.6).
How to create multiple layers? The example shown in Figure 6.7 illustrates that components of type ImageField can be arranged in different Z-order (see section 2.11.4 and also section 3.7.5 for an example).
FIGURE 6.7: Example item illustrating ImageFields with alpha transparency and different Z-Order (html|ib).
Advanced scenarios combining and overlaying several images with semi-transparency currently need to be prepared outside the CBA ItemBuilder. To implement semi-transparency, please merge the images in a graphics tool and, if necessary, cut them into several pieces. The components described in section 3.10.2 can be used to design items with multiple images.
How to find the original size of an image in pixel? The size of images in pixels is relevant for the design of computer-based items (not only with the CBA ItemBuilder). If the images are too small, i.e., smaller than the size in which they are displayed, then a blurred impression results from the extrapolation during enlargement. If the images are too large, they must first be loaded entirely in the browser before they can then be reduced to the actual size for display. This consumes bandwidth unnecessarily.
To learn about the size of an image file, right-click the file in either Explorer or Finder, and select Get Info (Mac) or Properties (Windows) to see the physical size of images (in pixels). On Windows, a click either on Details or Summary can be required to access the information (the tab name will depend on the specific operating system).
To support the display in the size that matches the file size, the CBA ItemBuilder will automatically resize the component (e.g., ImageFiled) to the size of the image after linking the image to the component.
Why to resize images before adding them to the CBA ItemBuilder? It is recommended to reduce images for use in the CBA ItemBuilder to the size with which the images should actually be used. This does not only reduce the file size and thus potentially the loading time in online deliveries, it also allows a better control over the result of the scaling, as shown in Figure 6.8.
Always use Proportional Scaling: If image files are resized in the CBA ItemBuilder, please make sure that the aspect ratio does not change (proportional scaling). The easiest way to do this is to resize the image display component using the grid points at the corners (and not to use the grid points in the middle between the corners).
6.2.2 Preparing Audio and Video Files
Audio and video files can be used in CBA ItemBuilder Tasks as part of the instruction, as a stimulus (for example, for listening comprehension tasks), or for test accommodation (i.e., reading aloud test accommodation). In the current version, CBA ItemBuilder supports libraries for generating conversion from Text to Speech only via ExternalPageFrames. The default way is to create audio files and videos (analogous to images) before using them in the CBA ItemBuilder and import media resources via the Resource Browser (see section 3.10.1).66 Some open-source tools that might be helpful include:
- Tools for audio editing and converting, e.g., audacity
- Tools for video converting (e.g., ffmpeg, VLC player)
- Tools for video capturing (e.g., OpenShot or OBS)
How to convert audio and video files formats? Various tools, such as the VLC player, exist that support converting file formats. The CBA ItemBuilder supports the file formats listed in section 3.10.1 for audio and video files. For video resources, not only the file format but also the codec used must be taken into account. Whether an audio or video file in a particular format can be used for test delivery depends not only on the CBA ItemBuilder. The browser or web browser component used to display the item content must support the format used. Therefore, it is recommended to keep the sources, especially for self-created audio and video files, and to test the usability in the concrete setting before converting and integrating many files.
How to change the volume of the audio files? The volume of audio and video is fixed within the files and can, within certain limits, be increased or decreased as part of the pre-processing. For audio files, this can be done, for instance, with audacity. The VLC player and other tools support this functionality for video files.
How test-taker can change the volume? The volume of audio resources within the file is one of many factors determining how loud audio files are played during Runtime. The components used for embedding Audio and Video resources can also change the audio output volume (see section 3.10.3 for details), either using the visible Controls or using a Finite-State Machine operator.
The generation of many image files (e.g., to display texts in a non-web-safe font) can also be automated before the images are then inserted into the CBA ItemBuilder. Here is a simple example where texts are read from an Excel file and generated as small image files↩︎
A free tool to generate speach from text can be found here: https://ttsmp3.com/.↩︎