Creating a slider interaction

Creating the interaction

When authoring a module, you can create a number of different interaction types. To create an interaction, make sure the 'Add' tab has been selected from the tools menu, at the top of your module page, then choose the interaction type you'd like to create from the 'Interaction' dropdown menu. The interaction will appear on the page, ready for you to change the question, add options and change the formatting.

Moving and resizing the interaction

To move your interaction and position it on screen, click and hold down your mouse in the centre of the interaction box, then drag the interaction and place it where you'd like it to sit on the page. To the top-left of the interaction, you will see the X and Y coordinates of the interaction and the size of the interaction box in pixels.

To resize your interaction, click and hold, then drag using your mouse on any of the small squares found at the edges of the box. These squares are found at the top, bottom, left and right of the box as well as at each of its four corners. You can see what size your interaction box is by the numbers beside the coordinates at the top-left of the box itself.

Changing the question, adding options and points

To change your interaction's question, options or points, double-click on the centre of the box to bring up its settings panel. When the settings are displayed, you can change several aspects of the interaction.

  • The number of points a user can gain for this interaction. To change the number of points the interaction is worth, type a number into the appropriate space.
  • The range of the slider. If your slider is going to use a number value for its options, you can input the range you want users to choose from, i.e. 1 to 10. If your interaction is going to have a set of options from which users can choose their answer, it's probably easiest to think of this and the placing of each option, i.e. if there are going to be three options, these options would sit in the first, second, third, fourth and fifth position, so you'd insert 1 (first) and 5 (fifth) for the range options here.
  • Where you want the slider to snap. You can enter a number here that determines the positions the slider will jump to when your users are interacting with it, i.e. if you want users to be able to select an answer that is a tenth of a number, you'd insert 0.1 here. If you want users to select from the five options mentioned earlier, you'd insert 1 here, so the slider always snaps to a whole number, each of which is the position for your options.
  • Set the 'Range' and 'Value' to be displayed or visible to your users. You can check or uncheck these two items to decide if you want them to be seen by your users or not. Generally, you'll want users to be able to see the value they are selecting on so this item will almost always be checked.
  • Decide on the direction of the slider. Using this dropdown menu, you can choose to have your slider interaction set to horizontal (the default setting) which means it will slide from left to right across the page or vertical which mean it will slide up and down the page.
  • Add labels to the interaction. These labels are the possible answers that will sit at each snap position you decided on for the interaction, i.e. you might want to have the names of various colours as possible answers. Click the 'Labels...' button, then type your labels into the popup which appears with a comma separating each label, i.e. 'red,green,blue'.
  • Add an interaction label. In this space, you can type a question or heading text for the interaction. You can also opt to make this text hidden to users by selecting the appropriate radio button. If shown, this text will appear above your interaction options.
  • Add correct and incorrect options. You can add options in the associated spaces in the interaction settings panel. These are linked to the numbers associated with the positions on the slider, i.e. if your slider interaction had the labels 'red', 'green' and 'blue' and the correct answer was 'green', you'd add '2' for an option here and set as correct because 'green' is in the second position of your three labels. You can toggle the green tick (correct) or red cross (incorrect) beside each option by clicking on that icon. 

When you're finished with your interaction settings, choose the 'OK' option. Your changes will be displayed on the page.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us