Race-Against-Time/page5trap.html at master · HamdiaA/Race-Against-Time · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
	<title>Page 5 Trap</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="page5.css">
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Xanh%20Mono">
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Homemade%20Apple">
	<script type="text/javascript">
		function validateForm() {
  			var x = document.forms["myForm"]["answer"].value;
  			if (x == "PPE" || x == "ppe") {
    			return true;
  			}
  			alert("Wrong Answer. Try Again");
  			return false;
		}
	</script>

</head>
<body>
	<!-- alert banner on top of page !-->
	<div class="alert">
  		<span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  		You chose the wrong box! Answer the question to go back!
	</div>

<!--riddle -->
	<div class="center">
		<img src="riddle.jpg" class="img">
	</div>
	<!--form for valid answer -->
	<div class="center">
	<form name = "myForm" action="page5.html" onsubmit= "return validateForm()" method="post">
  		<input type="text" name="answer" required>
  		<input type="submit" value="Submit">
  	</form>
  </div>
  <!--paper clue -->
	<div>
		<img src="clue.jpg" class = "clue" alt="clue on paper">
	</div>
<!--background music -->
	<audio autoplay loop>
        <source src="backgroundmusic2.mp3">
 	</audio>


<!--js for timer-->
 		<script type="text/javascript">
var timePassed = parseInt(sessionStorage.getItem('timePassed'));
document.getElementById("timer").innerHTML = `
<div class="base-timer">
  <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <g class="base-timer__circle">
      <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
    </g>
  </svg>
  <span id="base-timer-label" class="base-timer__label">${formatTime(
    timePassed
  )}</span>
</div>
`;

startTimer();


function startTimer() {
  timerInterval = setInterval(() => {
    timePassed += 1;
    document.getElementById("base-timer-label").innerHTML = formatTime(
      timePassed
    );
  }, 1000);
}

function formatTime(time) {
  const minutes = Math.floor(time / 60);
  let seconds = time % 60;

  if (seconds < 10) {
    seconds = `0${seconds}`;
  }

  return `${minutes}:${seconds}`;
}

sessionStorage.setItem("timePassed", timePassed);
</script>

</body>
</html>