Nov 14 2016


Storyline : Multiple Answer Quiz on one slide

Filed under How-To

[edit : I revised this on 11-30-2017]
With just a few hundred setup clicks, you can “hack” storyline to offer the basic functionality of : more than one question on a slide. wee (groan)!
Here is a pdf version with pictures (1.4 mb)
long form explanation follows…

SUMMARY:
basically, we’re going to fake up some pull down menus.

We make buttons on the base layer that have a state for each possible answer. We make a layer for each question with all these answers as pull-down menu items. When you click one of these pull down items, it changes the state of that button on base layer and hides layer. Then we evaluate the states of all these buttons to secretly select a hidden button. The “quiz” type for the slide is “select one” so it is ignoring all our tricks and just evaluating these hidden buttons.
So if all the visible buttons were set to the right states, the slide will evaluate to true.

Optionally, we can make little feedback icons (red X’s) to the left of each question, so user can get an idea which parts they screwed up. We hide these Xs when the timeline starts, and when their button is clicked.

PROCESS:
A. Create buttons
1. Add text like “select” (or “click me”)
2. Name the layer for each button (something like “q1”)
(because they’ll be in a long pull down list of objects later on. So the default name like “rectangle 26” will be confusing)
3. Add button States for each potential answer.
(These states store what the user selected. Which state is active will be changed through a trigger on a layer , which we will setup later).

tip: once you create the first selection button, cntrl-drag it to quick duplicate. But this will also duplicate states (which can’t be renamed. You have to delete and remake them to have different State Name).

4. Create 2 dumb buttons that are not visible on the main stage (off to the left for example). Name one “Yes” and the other “No” (or whatever you like). Name their layers too. These are what the slide is actually checking to evalute right or wrong final answer.

B. Convert slide to Quiz
1. Click [Insert]”Convert to Freeform” button on ribbon. Choose the “Pick One” quiz type.
2. Change [Design] “Attempts” from “1” to “unlimited”
(on the ribbon’s Scoring area). (this is so the users can’t move on until they answer all buttons correctly. otherwise, they’ll advance whether right or wrong – and won’t able to re-take this quiz at all).
3. Set answer list form to have your dumb buttons as options. Select “yes” as right answer.

C. Create wrong-answer feedback (Optional?)
1. Click [Insert] “Shape” on ribbon. Scroll down to “equation shapes” and click the multiplication X symbol. Drag on stage to make it about size of question line. Click [home] “Shape Fill” to make it red.
2. Duplicate and place next to each question. (Strongly suggest putting it on left edge, so it won’t be obscured by the quiz’s final feedback popup). Use [home] Arrange>Align>… to “Distribute Vertically” and “Align Left”
3. Name the layer for each X (something like “x1”)
4. Add trigger to hide X when timeline starts. make sure this uses the SLIDE’s timeline, not the OBJECT’s timeline (set 5th field “Object:” at bottom to slide. the screenshot at right has this field set wrong!).
4. Add trigger to hide X when its Choose Button is clicked. (for quiz retakes)

tip: In the Trigger area, you can copy a trigger (using 2 papers icon), select another object,
and paste (using clipboard icon). This will auto-replace the trigger’s “On Object:” (time saver).

D. Create global triggers (for final evaluations).
1. Create a huge “yes” trigger which changes the state of “yes” to selected (when conditions are met). Then enter conditional statements to check if each select button state is equal ( == ) to the state you want. The conditional “List:” defaults to “Variables”, but you change that radio button to “Shapes” to see the States you created earlier.
Make sure these conditionals are all true at the same time by choosing “AND” for all of them (default).

2. Also create a huge “No” trigger. This time, the conditionals should check each button for not-equal ( != ) to right answer, and use “OR” on all of them (so that if ANY is not-equal, this dumb button will be selected).

(note: if you were to only set up the “yes” trigger, no dumb button would be selected until user got every single answer correct. So the quiz would report back “no answers were selected”, instead of reporting “wrong”)

tip: you could also evalute multiple text entry fields instead of button states. Create them with [insert] Controls > Text Entry. Then in these big conditional-based triggers, it’s important to
choose “= = (ignore case)”

3. Add triggers to: Change state of each X to “normal,” when user clicks submit button. (this is what shows the X).
Must add a conditional statement that checks if the corresponding choose button is not-equal to the right answer State.

4. Move the “submit interaction” trigger to the bottom of the list of Triggers, using the down arrow icon in the Triggers sidebar. This ensures the slide will only evaluate our 2 hidden buttons after they’ve been set by the other large evaluation triggers.

E. Create layers
1. Make a layer for each choose button.
2. Name each layer to match (if button was “q5” you might name the matching layer “a5”)
3. Add “Show Layer” trigger to each choose button, and set it to corresponding layer. (this is a good place to use copy/paste trigger icons to save time)

F. Create text fields
1. Make a text field for each answer (on each layer). These should have the same wording that users will see in the choose button States (on base layer).

tip: Text fields don’t have backgrounds by default, but you can use [Home]”shape fill” on the ribbon to set a background color similar to the original choose button.

2. Add a State to each answer text field, of type “hover.” Change its shape fill to be a lighter color.

tip: if you want different text fields to have same style (fill color, hover fill color, text font and color), you can select the text field you like, then use [home]”format painter” to apply these attributes to the next object you click.

tip: After a Hover state is setup, you can just cntrl-drag the first text field and edit the visible text. The hover state will just change the background color without affecting visible text.

tip: You can Alt-Drag to move objects without snapping. This is easiest way to create overlap, so they seem to have one background.

3. Add a “Change State Of” trigger to set state of corresponding choose button (to each text field)
This is where it comes in handy to have given all the choose buttons unique names. Make sure you are setting a State that matches the visible text. You can copy and paste this trigger with the icons in the Triggers area – but you will need to edit the pasted trigger to match the visible text.

4. Add a trigger that hides this layer when clicked (to each text field). Again, you can copy/paste this triggers for speed.

tip : you can save a lot of time by copying your text fields from first layer and pasting into all the other layers. then you just need to edit their content text, and which choose button’s state they affect.

HOTKEYS:__________________________________
* cntrl-drag: will duplicate an object.
* alt-drag: will disable snapping (so hold alt for smoother resizing)

NOTE:
This is a summary of this 30 minute tutorial video (from a wacky guy with a sort of annoying marketing tone): https://vimeo.com/52342544

Print Friendly, PDF & Email

No responses yet




Trackback URI | Comments RSS

Leave a Reply