Lock Quiz Button

Good afternoon to everyone,

I’m building a quiz where I have, for each question, more response options.
The right answer gives a point, the wrong ones no point.

Since I have to take into account the score accrued by the user, I need that the user, after clicking the button chosen among the options, can no longer click on the other buttons before moving to the next question.

Is there a way to change the condition of each button from “clickable” before choosing to “locked”, if another button is chosen?

use the css property ‘pointer-events: none’ or protect the buttons by an elemnt that overlays them :slight_smile:

2 Likes

You might like this… https://photics.com/free-template-tuesday-7-tumult-hype-capitals/

It has a percentage score at the end too.

Hi Hans-Gerd,
thanks for your suggestions!

I tried to adjust the Inner HTML of a button with two key points on the timeline: at the first key point, which corresponds to the specific time (00:01,00) in which the presentation should go at the click of the button (I attach the screen of the panel settings for greater clarity) the css has the code “pointer-events: none”, at the second key point (00:01,01) the internal HTML of the button changes to “pointer-events: auto” (I attach the screenshots of both the inner HTML for greater clarity).

I did a test in Preview but it doesn’t work like this: the button remains clickable even if the timeline goes to the moment when the internal HTML should make it non-clickable.

Can you tell me where I’m wrong and how can I correct it?

Thanks a lot!

button%20settings%20at%2000-01-00 button_first%20key%20point button_second%20key%20point

In any case, I have also tried the alternative of covering the buttons, and as a solution it is still fine!

Thanks a lot!

Hello Photics,
thanks for the suggestion!

If you can post an example it will be easier to explain to you.

The click action is performed on the Hype element that your div is in (innerHTML) not the innerHTML div.

It looks like you only have the innerHTML so you can setup the pointer events.

You can remove that.

Give the question buttons a class name in the Element Inspector.
Each group/related question set should have the same class name.
Also give them an Javascript Action pointing to this code.

You can give every buttton in any question group the same Javascript action.

	var thisClass = element.classList[1]
	var qu_ = document.querySelectorAll("." + thisClass)
	console.log(thisClass)
var i;
for (i = 0; i < qu_.length; i++) {
qu_[i].style.pointerEvents="none"
}

When you give an hype element a class in the inspector it is add to the class list. This list already contains a class which is at position/index 0. So our new class will be at position/index 1

Here is an example.

The second code function is just so it shows a result of button clicks.
Lock Question Buttons.hype.zip (17.8 KB)

4 Likes

Hello MarkHunte,

thanks for the reply and the example resource!

I had already assigned a “btn_answer” class to all the buttons of all the questions in the quiz, so it was enough to insert your function in Hype and give the buttons the “execute javascript” action to get the desired effect!

The only thing that would complete the whole thing, at this point, is the possibility of canceling the block to the buttons when downloading the question scenes, so that, returning to the “home” to repeat the quiz, all the buttons are still clickable (each slide quiz in fact can return to a slide “home”, where there is a button that points to the first slide of the quiz).

How can I get this behavior?

Thanks for your help!

Add “allAnsws” as another class in the question element and set your submit button to run something like this

if (element.id == "submit"){
		var all_ = document.querySelectorAll(".allAnsws" )
		var i;

		for (i = 0; i < all_.length; i++) {
		all_[i].style.pointerEvents=  "auto"

                  ///reset answer result text
 		hypeDocument.getElementById('a1').innerHTML =  ""
 		hypeDocument.getElementById('a2').innerHTML =  ""
		}

	return
	}

Goodafternoon MarkHunte,

here is an example file:
lock quiz button_example file.hype.zip (283.7 KB)

I assigned to all the buttons also the “allAnsws” class, and to the “GO TO QUESTION 2” button the function you indicated to me. I’m afraid I didn’t understand the function correctly: which elements should I assign IDs “a1”, “a2” and “submit”?

I’m sorry, I’m not a code expert…
Thanks for your help

the a1 and a2 were just so my example would work…

I would suggest that you run the reset code on scene load javascript action and change the code to

	var all_ = document.querySelectorAll(".allAnsws" )
	var i;

	for (i = 0; i < all_.length; i++) {
	all_[i].style.pointerEvents=  "auto"

}

since you are jumping around from scene to scene

or

Give the return symbol and go the question …x buttons the class name of “goTo”

and set them to run

var thisClassName = element.classList[1]

if (thisClassName == "goTo"){
	var all_ = document.querySelectorAll(".allAnsws" )
	var i;

	for (i = 0; i < all_.length; i++) {
	all_[i].style.pointerEvents=  "auto"

	}

}
1 Like

:+1::smile:
thanks a lot!!!