-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathindex.html
79 lines (71 loc) · 2.6 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>title</title>
<style>
.content {
margin: 40px;
text-align: center;
}
.box {
padding: 10px;
}
#context {
background-color: #FFD;
padding: 16px;
text-align: left;
}
#situation {
margin: 20px 10px 0;
}
</style>
</head>
<body>
<div class="content">
<div id="context" class="box">
You've been hired by USC to program your own autonomus vehicle, which we call auto car for short.
The more conditionals, the smarter your auto car can become.
How many conditionals can you add?
</div>
<div id="situation" class="box">your auto car is driving down the road, when suddenly it sees a </div>
<div id="text-box" class="box"><input id="situation-input" type="text" /></div>
<div id="btn-react" class="btn btn-primary">React</div>
<div id="result" class="box"></div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
function autorun()
{
var $situation = $("#situation")
, $textbox = $("#situation-input")
, $btnreact = $("#btn-react")
, $result = $("#result")
$btnreact.on("click", function() {
var input = $textbox.val()
if (input == "stop sign") {
return $result.html("auto car comes to a safe and complete stop")
}
if (input == "person") {
return $result.html("auto car goes around him/her")
}
if (input == "flood") {
return $result.html("auto car turns around")
}
if (input == "river") {
return $result.html("car drivers around it")
}
$result.html("auto car does not know how to handle this situation")
})
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", autorun, false);
else if (document.attachEvent) document.attachEvent("onreadystatechange", autorun);
else window.onload = autorun;
</script>
</body>
</html>