-
Notifications
You must be signed in to change notification settings - Fork 59
/
Copy pathquestionnaire-pre.html
115 lines (110 loc) · 5.78 KB
/
questionnaire-pre.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>CS4249 Assignment 1</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-default">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Welcome</a></li>
<li class="active"><a href="questionnaire-pre.html">Pre Questionnaire</a></li>
<li><a href="instructions.html">Instructions</a></li>
<li><a href="experiment.html">Experiment</a></li>
<li><a href="questionnaire-post.html">Post Questionnaire</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Pre-Experiment Questionnaire</h1>
<hr>
<p>This part of the interface collects whatever pre-experiment information. Please come up with a basic questionnaire to help you to gather participant information. The purpose of this questionnaire is to report the participant data and convince readers that you have picked an appropriate target user group and the result has certain generalizability.</p>
<p>Please put all information needed for participant: <span class="js-pid pid"></span></p>
<form id="pre-expt-form">
<div class="form-group">
<label for="q1">Question 1 - Text</label>
<input type="text" class="form-control" id="q1" name="q1" placeholder="Enter answer">
</div>
<div class="form-group">
<label for="q2">Question 2 - Radio</label>
<div class="radio">
<label>
<input type="radio" name="q2" id="optionsRadios1" value="radio1">
Radio response 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="q2" id="optionsRadios2" value="radio2">
Radio response 2
</label>
</div>
</div>
<div class="form-group">
<label for="q3">Question 3 - Checkbox</label>
<div class="checkbox">
<label>
<input type="checkbox" name="q3" value="checkbox1">
Checkbox response 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="q3" value="checkbox2">
Checkbox response 2
</label>
</div>
</div>
<div class="form-group">
<label for="q4">Question 4 - Select Options</label>
<select class="form-control" name="q4">
<option value="option1">Option response 1</option>
<option value="option2">Option response 2</option>
<option value="option3">Option response 3</option>
<option value="option4">Option response 4</option>
<option value="option1">Option response 5</option>
</select>
</div>
<div class="form-group">
<label for="q5">Question 5 - Textarea</label>
<textarea class="form-control" id="q5" name="q5" placeholder="Enter response"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</form>
</div>
</div>
</div>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/DataStorage.js"></script>
<script src="js/ACPToolKit.js"></script>
<script src="js/main.js"></script>
<script>
$(function () {
$('#pre-expt-form').submit(function (event) {
event.preventDefault();
var formResponses = $(this).serializeArray();
// Do your own form validation here.
ACPToolKit.downloadFormData(formResponses, 'pre');
window.location = 'instructions.html';
});
});
</script>
</body>
</html>