arti Crate boses The uer mut click on one of the boses Howew,one of the boxes is
ID: 3906948 • Letter: A
Question
arti Crate boses The uer mut click on one of the boses Howew,one of the boxes is a trap The trap box is random each time. If the user clicked on a safe box, change that box's colour to light oe If the wer clicked on tr oer ciked on the trnp bos,c thange thuat bor's colour to red and upate the content in this paragraph to SAFE" (if the chcked box is safe) or BOOM" (if the clicked box is a trap). Notice that Ive alerady created the boues for you and that CSS has been provided It is t Tve alradycreted the boses for you and that CSS has beem provided It is expected that you apply this CSS where necessary Pat 2 Start a 5 mecond counlows that undates thas puragraph with a Time's up" messape when the countdown is over Remove the ability for the user to click on al ckground colour of the eatire body to black Pick a bosExplanation / Answer
<!DOCTYPE html>
<html>
<head>
<style>
.box_normal {
width: 70px;
height: 70px;
margin: 10px;
background: green;
}
.box_correct {
width: 70px;
height: 70px;
margin: 10px;
background: lightblue;
}
.box_wrong {
width: 70px;
height: 70px;
margin: 10px;
background: red;
}
</style>
</head>
<body>
<h3>Pick a box</h3>
<div>
<div id="box_1" class="box_normal"></div>
<div id="box_2" class="box_normal"></div>
<div id="box_3" class="box_normal"></div>
<div id="box_4" class="box_normal"></div>
</div>
</br>
<h2 id="res">
</h2>
<script>
var random_trap = Math.floor(Math.random() * 4) + 1;
console.log("Box" + random_trap);
var is_timeout = false;
var timeleft = 5;
var downloadTimer = setInterval(function(){
--timeleft;
if(timeleft <= 0) {
clearInterval(downloadTimer);
is_timeout = true;
document.body.style.backgroundColor = "black";
}
},1000);
function myFunction(box_no) {
if(is_timeout == false) {
var id_div = "";
if(box_no == 1) {
id_div = "box_1";
} else if(box_no == 2) {
id_div = "box_2";
} else if(box_no == 3) {
id_div = "box_3";
} else if(box_no == 4) {
id_div = "box_4";
}
if(box_no == random_trap) {
document.getElementById(id_div).className = "box_wrong";
document.getElementById("res").innerHTML = "BOOM";
} else {
document.getElementById(id_div).className = "box_correct";
document.getElementById("res").innerHTML = "SAFE";
}
}
}
</script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.