How to have user select options on screen 1 and display feedback on screen 2?

Using JavaScript with Hype
1

Hi, I’m new to Hype and trying to move over from Articulate Storyline.

I have an interaction I’m trying to replicate where a user can

  • select multiple options on screen 1
  • click a submit button on screen 1 to take them to screen 2
  • see feedback (text boxes) on screen 2 based on their selections on screen 1

Would anybody be able to point me in the right direction for this. I’ve spent a whole afternoon trying to figure it out and not got very far. I need all of the feedback to be shown together on screen 2 as a kind of summary.

Any help is appreciated. Thanks!

2

Can you give a little more info. :wink:

How are the users selecting options?

The feedback can be handled by setting the innerHTML of the text boxes with the information gathered from screen 1 but as I don’t know how your users are selecting or inputting the information I cannot (or others) give you an exact way.

One option is obtaining the value of an input box (where the user types something) and storing this in a variable. (The following should be a “New Function…” created on Mouse Click for your submit button)

window.information = document.getElementById('INPUT-BOX').value; // information set globally to make it available to all scenes

Also you can place another action on mouse click (by clicking the plus) to jump to the next scene.

then on scene 2 you could have a function on scene load that populates the “text boxes”.

var textBox1 = document.getElementById('1st Text Box');
textBox1.innerHTML = information; // information from scene 1

This is just one example of many ways you could transfer information from one scene to another. You will have to substitute the words in Red above to your own ID’s (that you put in the Identity panel of the inspector)

2 Likes
3

Thanks for the reply.

Users are selecting options with by selecting icons / tick boxes / radio buttons. The following screen has a default look and then depending on which selections were made on the first screen the following screen also has extra text on it. One piece of text for every selected option on first page. No content needs to be carried from the 1st page to the 2nd so a variable would work if it was set to true by clicking an item on the first page and then dialysed on the second page if it sees the variable is set to true.

Cheers

4 
if (document.getElementById('RADIO BTN ID').checked) { // returns true if checked
    // do something...
}

if (document.getElementById('TICK BOX ID').checked) { // returns true if checked
    // do something...
}

// for an icon you can set the variable / true status on a mouse click
if (clicked || icon == true) { // clicked is a variable we change on mouse click of the icon. If we don\'t click the icon then the value will be false (set on scene load). Likewise on scene load we can set a variable "icon" to false and change it\'s value when clicked to true
    // do something...
}

make sure you set any variables globally (e.g window.icon ) so that each scene can see the results of your user interaction on scene one.

1 Like