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?
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?
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
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).
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
}
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
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"
}
}
