External Exam Download Resources Web Applications Games Recycle Bin

JavaScript Challenges #2 medium

Question 1: Create the following game using JavaScript within a HTML file, and launch it in your favourite browser:



Question 2: Modify the code you wrote in Question #1 so that the sum of the two dice, as well as whether or not it is doubles, is displayed, as shown here:



Question 3: Create the following file in VS Code, save it, and launch it in your favourite browser:

Guess which dice is going to be higher.html

<img id="dice1" src="https://digisoln.com/resources/dice/unknown.bmp">
<img id="dice2" src="https://digisoln.com/resources/dice/unknown.bmp">

<p>Which dice will be higher?</p>
<input type="radio" name="choice" id="left" />
<label for="left">dice 1</label><br>
<input type="radio" name="choice" id="right" checked />
<label for="right">dice 2</label>
<br>
<button onclick="roll()"> Roll </button>

<script>
var guesses_right = 0;
var guesses_wrong = 0;

function roll(){
    choice = "";
    if (document.getElementById("left").checked){ choice = "dice1"; }
    if (document.getElementById("right").checked){ choice = "dice2"; }

    number1 = Math.floor((Math.random() * 6) + 1);
    number2 = Math.floor((Math.random() * 6) + 1);
    link1 = "https://digisoln.com/resources/dice/dice"+number1+".bmp"
    link2 = "https://digisoln.com/resources/dice/dice"+number2+".bmp"
    document.getElementById("dice1").src = link1;
    document.getElementById("dice2").src = link2;
}
</script>

Question 4: The game you just made in Question #3 is the start of this game (see image below). It uses radio buttons to get a choice from the user. Can you finish the game as pictured here by getting it to tally my right and wrong guesses:



Question 5: Create the following file in VS Code, save it, and launch it in your favourite browser:

Cheat dice.html

<img id="dice1" src="https://digisoln.com/resources/dice/unknown.bmp">
<img id="dice2" src="https://digisoln.com/resources/dice/unknown.bmp">

<select id="cheat">
    <option value="double">roll double 6's</option>
    <option value="snake">roll double 1's</option>
</select><br>

<input type="checkbox" id="disable_cheats" checked> 
<label for="disable_cheats"> disable cheats </label> <br>

<button onclick="roll()"> Roll </button>

<script>
function roll(){
    cheat = document.getElementById("cheat").value; //listbox
    disable_cheats = document.getElementById("disable_cheats").checked; //checkbox

    if (disable_cheats){ // regular dice roll:
        number1 = Math.floor((Math.random() * 6) + 1);
        number2 = Math.floor((Math.random() * 6) + 1);
        link1 = "https://digisoln.com/resources/dice/dice"+number1+".bmp"
        link2 = "https://digisoln.com/resources/dice/dice"+number2+".bmp"
        document.getElementById("dice1").src = link1;
        document.getElementById("dice2").src = link2;
    } else { // cheat dice roll:
        if (cheat == "double"){
            document.getElementById("dice1").src = "https://digisoln.com/resources/dice/dice6.bmp"; 
            document.getElementById("dice2").src = "https://digisoln.com/resources/dice/dice6.bmp"; 
        }
        if (cheat == "snake"){
            document.getElementById("dice1").src = "https://digisoln.com/resources/dice/dice1.bmp"; 
            document.getElementById("dice2").src = "https://digisoln.com/resources/dice/dice1.bmp"; 
        }
    }

}
</script>

Question 6: The game you just made uses a listbox and checkbox to "fix" the dice when i want either a double 6 or a double 1. Your challenge here is to replicate the cheat system in your coin flip game, so that i can choose to enable / disable cheats (using a checkbox), and if i choose to cheat, i can choose to either flip a head or a tail (using a listbox):