External Exam Download Resources Web Applications Games Recycle Bin

JavaScript Challenges #1 easy

Question 1: Create a JavaScript / HTML file that when i click a button, it changes the innerHTML of a <h1> tag, as shown in the following image:



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

image changer.html

<img id="display" src="https://digisoln.com/bin.png">
<button onclick="change()"> change pic </button>

<script>
function change(){
    printer = "https://digisoln.com/print.png";
    document.getElementById("display").src = printer;
}
</script>

Question 3: With the HTML file you just created in Question 2, make the following changes:

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

Coin toss.html

<img id="coin" src="https://digisoln.com/resources/coins/heads.gif">
<button onclick="flip()"> flip coin </button>

<script>
var heads = "https://digisoln.com/resources/coins/heads.gif";
var tails = "https://digisoln.com/resources/coins/tails.gif";
function flip(){
    number = Math.floor((Math.random() * 2) + 1)
    if (number == 1){ document.getElementById("coin").src = heads; }
    if (number == 2){ document.getElementById("coin").src = tails; }
}
</script>


Question 5: The game you just made is Coin toss, and tosses a coin to reveal heads or tails (pictured above). Can you enhance this game by counting and displaying the number of heads and tails i flip? An image of the requirements and some starter code is shown below:





Question 6: Using the image links to dice from Question #3, and the random number code from Question #4, can you make a single dice roller HTML / JS file, as shown below:



Hint: you may need to modify the random code to allow for 6 outcomes, e.g.: number = Math.floor((Math.random() * 6) + 1)