@mmatera
I’ve adjusted @h_classen file a bit. In addition to the numbers “5”, “25”, “50” & “100” I’ve added “3”, “7”, & “9”. These numbers represent your “bonus squares” in the random mix.
So when the “fill randomly” button is clicked these numbers can be added in to the text boxes. In my Demo (link is three paragraphs below) I have a “question mark” graphic (yours actually) that, when clicked on runs a JavaScript (please see below near bottom) that checks the contents (innerHTML) of the text box beneath it. If the innerHTML is “3”, “7”, or “9” it swaps out the question mark graphic for a bonus graphic (no number is revealed) and the sound effect plays.
For the purposes of the Demo I am only using “7” as a bonus trigger. Also, there is only one question mark graphic, which is above the 2nd text box (from left, top row). Normally, of course, the graphic would be directly over the corresponding text box, hiding it. I have moved the graphic above this text box so You can see the numbers that show up when You click the “fill randomly” button. You will probably need to click this button a few times to get the “7” to show up in the 2nd text box. When it does, clicking the question mark graphic displays the bonus square graphic and plays a sound effect; otherwise the question mark graphic “disappears” - which if it were over the text box would reveal the number beneath. Once You click on the question mark graphic You will need to reload the page to reset it.
As mentioned previously the question mark graphic is matched to the text box below it. The question mark graphic in the Demo has an ID of “questionBox_02” the corresponding text box has an ID of “tb_02”. In the JavaScript below, the ID of the question mark (when it is clicked on) is established and then it is matched to the corresponding text box by the last two characters of the ID name, in this case “02”. The innerHTML of the text box is then checked to see if it is a bonus number or not (“3”, “7”, or “9”), and executes the appropriate conditional code (if this do one thing, else do another).
Project Here: shufflePoints_JHS_v1.hype.zip (60.2 KB) - Demo here.
The JavaScript that runs the bonus detection (or “surprise” as I have named it)…
function supriseDetection(hypeDocument, element, event) {
var surprise = element.id; // the "question mark" graphic's ID
questionBoxNum = surprise.slice(-2);
// extract the last two digits from the element id i.e. "02" from "questionBox_02"
var audioEffect_1 = document.getElementById("sndEffect_1");
// audio file when "bonus square" is clicked
tbNum = "tb_"+ questionBoxNum;
// establish what is the corresponding "text box" below the "question" graphic
tbNum = hypeDocument.getElementById(tbNum);
//conditional if/else code below
if (tbNum.innerHTML == 7) { // "7" is one of the "surprise" or "bonus" squares
hypeDocument.getElementById(surprise).style.backgroundImage = "url('${resourcesFolderName}/surprisePict_01.jpg')";
// swap the question mark graphic for the one for bonus square "7" - "surprisePict_01.jpg"
audioEffect_1.play();// sound effect triggered to play
}
else { // not a bonus square, so set the question mark graphic opacity to "0"...
hypeDocument.setElementProperty(element, 'opacity', 0);
}
}