-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtest-demo.html
78 lines (73 loc) · 3.56 KB
/
test-demo.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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Game</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></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" src="js/bootstrap-slider.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="css/bootstrap-slider.min.css" rel="stylesheet"></link>
<link type="text/css" href="css/trust-game.css" rel="stylesheet"></link>
</head>
<body>
<div class="survey" align="center">
<form action="javascript:next_page();" class="form-horizontal">
<legend>Please answer a few demographic questions below:</legend>
<div class="form-group">
<span class="col-xs-2 control-label" for="textinput">Age</span>
<div class="col-xs-2">
<input id="age" type="text" class="form-control input-md" required>
</div>
</div>
<div class="form-group">
<span class="col-xs-2 control-label">Gender</span>
<div class="radio col-xs-2">
<input name="gender" type="radio" value="m" required>Male
</div>
<div class="radio col-xs-2">
<input name="gender" type="radio" value="f">Female
</div>
<div class="radio col-xs-2">
<input name="gender" type="radio" value="o">Other
</div>
</div>
<div id="ethnicity-div" class="form-group">
<span class="col-xs-2 control-label">Ethnicity</span>
<div class="col-xs-3">
<select id="ethnicity-select" class="form-control" onchange="on_ethnicity_change()" required>
<option value="">Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Other</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary submit-btn">Next</button>
</form>
</div>
<script type="text/javascript" src="js/globals.js"></script>
<script type="text/javascript">
function on_ethnicity_change() {
var selected = $('#ethnicity-select').val();
if ((selected == 4 || selected == 5)) {
if ($('#ethnicity-text').length) {
return;
}
$('#ethnicity-div').append($('<div>', {
id: 'ethnicity-text',
class: 'col-xs-3'
}).append($('<input>', {
type: 'text',
class: 'form-control input-md',
required: true
})));
} else {
$('#ethnicity-text').remove();
}
}
</script>
</body>
</html>