Randomize Placement?

(mmatera) #1


I am building a bit of a deal or no deal game. Is there a way I could have a button that you click to randomize the location of the images and text boxes that are below the graphic of the briefcases? That way every time you play it, you would just click the button and you would get a new random placement of the reward values that are below the graphic of the cases.

Please forgive me as I don’t know much about programing. Just a 6th grade world history teacher designing his own review game.

Thanks much,


(Hans-Gerd Claßen) #2

if i understand you right the easiest approach would be to randomly change the backgroundimage of a shape …
do you have a premade layout¿

(mmatera) #3

Yes, think about a game board like jeopardy… Four rows and five columns. Under box one I have a point value of 10. Under box two I have a value of 50 points.

Now, if you want to play again with students, I would love to push a randomize button, and switch the location of all the things under the graphics that hide the point values.

(mmatera) #4

(Hans-Gerd Claßen) #5
  1. give an common class to every pointelement
  2. create an js-array that holds the pointvalues
  3. randomly sort the array
  4. set the innerHTML to each element of the class accordingly to the array

would you provide your document¿

(Hans-Gerd Claßen) #6

forget about it … take shufflePoints.hype.zip (23.0 KB)
as is … i guess you can adapt it

(mmatera) #7

WOW! That is great! Thanks much…

Now I have a follow up question. As you can see in my picture, there are a few bonus squares that have a graphic and sound attached to them when you open the box. Is there a way to randomize the placement and sound effects with them as well?

(Hans-Gerd Claßen) #8

easiest setup may be to group each fields elements. give a class to the group. collect positions of the class on sceneload. shuffle the positions onclick.
i won’t to the layoutsetup. if you like then share a sampledocument one can work with …

(mmatera) #9

Ok, I got the shuffle of the images to work… Now, my new problem is I need to have the top image of a question block to on click, run a java script that checks the text box below it and play the corrisonding audio file.


Box one, with the shuffle, now has a bomb under it. I need it to check that the value in that particular box, recognize that it is a the bomb image and play the sound. When I shuffle it again, and now it is the 25 point text, I need it to play the coin sound.

Does that make sense?

Thanks so much, your help has been invaluable.

(Hans-Gerd Claßen) #10

in js you can check for classes, ids, attributes, innerText, innerHtml of an element … and so on. for shure you can manage a setup, but there is no common way that fits all needs. If you group each cards elements, you can set a class for the whole group, do all the setup in hype as you want and just shuffle complete groups. this seems to be the most simple and flexible way for me seing the image of your setup.

there are built in getter- and settermethods within hype you can use to get and set positions

kind of shufflePositions.hype.zip (184.7 KB) as demo



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);