Forum Discussion

BrandonDameshek's avatar
BrandonDameshek
Community Member
7 months ago

Storyline Help Needed to Build an Interactive Quiz

Hello, all!

I've got a tricky one that I could use some help with. I have a client who wants to show a screen where a user can select various distractions while driving. This is supposed to be a quiz question, and there are seven total distractions/answers. Now, the client also wants there to be a "Hint" button users can click for help in identifying distractions.

How would you go about building this?! Would the main slide be a menu slide, and each of the correct answers would be their own slides? Would you use layers on the main/menu slide to show the "Hint" text?! Do you need to use variables to build this out?

I'm ripping my hair out over this one . . .

Thanks!

  • Hi Brandon, Here are a couple of examples that seem similar to what you're looking to do if your client wants the user to find the distractions in graphics. If they want to use a different approach, just let us know here in the comments, and please let us know if you have any questions. 

     

    • BrandonDameshek's avatar
      BrandonDameshek
      Community Member

      Thank you for sharing this! Do you know if there is a template for the Scavenger Hunt? Also, this doesn't quite get at what I need, in that:

      • There is no "Hint" button feature; and
      • The pointer changes to a finger when something is clickable. Doesn't that sort of make this too easy?

      Thanks again!

      • GingerSwart's avatar
        GingerSwart
        Staff

        No, it doesn't look like there's a template for the Scavenger Hunt example. 

        Here's an example I found that uses a Hint button. 

  • In this template, there is exactly such an element. And it is also related to the traffic rules)

    In short:

    We create a logical variable for each correct answer. Initially, the value of these variables is false, after the user has found a violation, we assign the variable the value true.

    Now we need to decide how we will provide hints. In my opinion, there are 2 ways.

    1. We can give hints with text "Pay attention to the goose crossing the road!".

    2. Highlighting the object on the screen.

    If we choose the first option, then everything is very simple. Create a text field with 7 states (one for each hint). And we write 7 triggers. When clicking on the "get a hint" button, we change the state of the text field to "1" if the variable "answer1" is equal to false (i.e. if the user did not find the first mistake). We create similar triggers for all hints.

    • BrandonDameshek's avatar
      BrandonDameshek
      Community Member

      Whoa! This is intense! I'm going to have to play around with this, but I genuinely appreciate the logic here as well as your effort.

    • BrandonDameshek's avatar
      BrandonDameshek
      Community Member

      Sorry to bug you again, but could you send me screenshots of what this looks like (in terms of triggers)?

      If we choose the first option, then everything is very simple. Create a text field with 7 states (one for each hint). And we write 7 triggers. When clicking on the "get a hint" button, we change the state of the text field to "1" if the variable "answer1" is equal to false (i.e. if the user did not find the first mistake). We create similar triggers for all hints.

  • If you don't need the cursor to change when hovering over an active object in the test, this can be resolved in 2 ways:

    1. Disable the CSS settings on this slide so the cursor does not change to a pointer when hovering over an active object. Unfortunately, I don't have ready-made code that will do this. But you can be cunning and use option 2.

    2. Place another huge transparent button over the entire slide under the buttons that the user is supposed to find. Create a trigger for this button that does nothing (for example, adds 1 to some variable or something else that will not affect the process at all). In this case, your cursor will always look like a finger (i.e., it will indicate that the object can be clicked) and, accordingly, there will be no hint.

  • Ha! That's great. That's essentially what I did on my end. I put transparent box under the buttons and created an "Incorrect" layer that is triggered when they click it.

  • In my case, when a user clicks on the hint button, we transfer them to a new layer. Therefore, in the trigger condition, I have set the start time on the layer. You can change this condition, for example, to just clicking the button. In the video starting from 6:50, I talk precisely about this mechanic. The video has English subtitles, which you can enable in the video menu.

  • This is great, Alex! Thank you so much for your help. May need to reach out to you again if I can't figure it out, but this is brilliant.