Components
Created by Smart Sparrow

Carousel

The carousel allows learners to swipe through a series of images. This can encourage learner discoverability of supplemental images. The images can also be paired with a caption and links to reference materials, offering learners supplemental content in an exploratory way.

 

Unique ways to use this widget

There are multiple ways you can use this widget. For example:

  • Discovering real-world examples of a particular subject. Because it is quite easy to configure, it’s a good way to have learners explore real-world news, situations, and data while allowing the author to easily go in and update to keep references up-to-date.
  • It can be used as a “choose your own adventure” activity, where there are multiple options for learners to choose from (for instance, a particular content focus or student interest), and based on the image that they focus on after swiping left/right, you can send the learner to a different screen in a lesson.
  • It can also be used as a way to encourage student choice, by creating multiple scenarios using images and captions, in which the student can analyze or complete an assessment with the scenario of their choice.
  • It is often utilized when there is a crowded screen that has too many interactions and images on it. We encourage you to use the image carousel for supplemental images and context, and to avoid burying required content within the carousel.

 

Have a play

 

Basic setup instructions

  1. This component can be found in the Author. Insert the widget from the Components tab and resize it to your liking.
  2. With the component selected, Click on Configure and select Options to set it up.
  3. You must change the Mode to Config mode to set up the widget.
  4. Download your series of images for the widget onto a folder on your computer. If you can, try to size your images as consistently as you can before uploading to the widget.
  5. Select Choose image in the bottom left corner. Select an image of your choice. This will be the first image that learners will see when they arrive on this screen unless specified otherwise in Initial State.
  6. (Optional): Type in the caption for your image to the right of the image.
  7. Repeat step 6&7 for as many images as you would like within the carousel.
  8. (Optional): CSS classes can be inserted in the CSS field in Options.
  9. Click Save once you have uploaded all of your images and created your captions.
  10. Once you’re done, open the Options menu and change the Mode to Student.
  11. Click Preview in the author to check your work.
  12. Have a look at the CAPI table desciption at the bottom of the article for more information on what you can do.

 

Other Options

To add a link to a caption, you can either add the link as is e.g. https://google.com, or you can add it as an HTML anchor tag to make another word become a link for example click here e.g. click here

 

FAQ

Q: Does this widget support audio or video? A: Not currently.

Q: I followed the steps to upload an image, but the image isn’t appearing in configuration mode. Did I do something wrong? A: Sometimes, the image that you just uploaded does not automatically appear in configuration mode. Try switching to Student mode, and seeing if it appears there.

Q: I went into Student mode and/or lesson Preview and an image is not appearing. Where did it go? A: It may be that your image is too large, or is too large of a file size. Try compressing the image or reducing the size of the image, and trying again.

Q: Is there a way to customize the Next and Previous buttons color/style? A: You may add custom CSS and CSS Classes to the CSS field in Options.

 

 

Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services