html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>Get Home Safe!</title>
</head>
<body>
<div id="start">
<p>You are walking down a dark path in the woods. After walking a bit you come to a fork in the path. To the left it gets darker and the wind is ruffling through the leaves. Was that a shadow that ran across the path? You look to the right you see a light by a bench with some bushes. Do you go left or right? </p>
<button onclick="left()">Left</button>
<button onclick="right()">Right</button>
</div>
<div id="left"></div>
<div id="right"></div>
<div id="runAway"></div>
<div id="keepWalking"></div>
<div id="giveUp"></div>
<div id="fightBack"></div>
<div id="left2"></div>
<div id="right2"></div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
body {
background-color:black;
color:white;
text-shadow:3px 3px 5px darkgrey;
font-size:25px;
text-align:center;
}
button{
font-size:25px;
}
.hide{
display:none;
}
Enter to Rename, Shift+Enter to Preview
js
js
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
function left(){
var start = document.getElementById("start");
start.className += "hide";
document.getElementById('left').innerHTML = "You go left down the dark windy path. You pass a trash can and you see a shadow pass in front of you. What do you do Run Away or Keep Walking?<br/><button onclick='runAway()'>Run Away</button><button onclick='keepWalking()'>Keep Walking</button>";
}
function runAway(){
var start = document.getElementById("left");
start.className += "hide";
document.getElementById('runAway').innerHTML = "You ran away! Try again!";
}
function keepWalking(){
var start = document.getElementById("left");
start.className += "hide";
document.getElementById('keepWalking').innerHTML = "You keep going down the path. You make it to the street. Do you go left or right?<br/><button onclick='left2()'>Left</button> <button onclick='right2()'>Right</button>";
}
function left2(){
var start = document.getElementById("keepWalking");
start.className += "hide";
document.getElementById('left2').innerHTML = "You went left and got ran over by a car. Try Again!.";
}
function right2(){
var start = document.getElementById("keepWalking");
start.className += "hide";
document.getElementById('right2').innerHTML = "You went right and made it home. Good Job!";
}
function right(){
var start = document.getElementById("start");
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run