-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (118 loc) · 8.61 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
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>What.digital typeform project</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<!-- ================================================== -->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">what.tform</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-pills pull-right">
<button id="nextBtn" type="button" class="btn btn-info">NEXT</button>
<button id="prevBtn" type="button" class="btn btn-info">PREV</button>
</ul>
</div>
</div>
</nav>
<!-- ================================================== -->
<div class="container" id="elements_container">
<div class="jumbotron">
<h1>Question/Step 1</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<div><img data-src="holder.js/200x200" class="img-thumbnail" alt="200x200" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzIwMHgyMDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTgxYzVhNWI3NCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1ODFjNWE1Yjc0Ij48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9Ijc0LjA1NDY4NzUiIHk9IjEwNC41Nzk2ODc1Ij4yMDB4MjAwPC90ZXh0PjwvZz48L2c+PC9zdmc+" data-holder-rendered="true" style="width: 200px; height: 200px;"></div>
</div>
<div class="jumbotron">
<h1>Question/Step 2</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
bla bla bla dgjdfjk dfkjghl dfgjd kjgfdg df8 3489893589489 ertr
dfd fd ffddfdsh fh dsfhdsfkhl dskh fdhsf khldsfhdshfdsf
df jds f dkhf dsf dsfdskjf dsf dsfk dkfdskhfdkhfdsfhds khfd id f4t435345 45353543543543</p>
<h3>subtitle </h3>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p>d fgfgd gfd gf gf uieuiweiuiuewr ew8r e8w rewriewf kdkjfdkjfdsk fhds hfdsh f</p>
<p><a class="btn btn-lg btn-success" role="button">Answer 1</a>
<a class="btn btn-lg btn-success" role="button">Answer 2</a></p>
</div>
<div class="jumbotron">
<h1>Question/Step 3</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<div class="list-group">
<a class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
</div>
</div>
<div class="jumbotron">
<h1>Question/Step 4</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-lg btn-success" role="button">Answer 1</a>
<a class="btn btn-lg btn-success" role="button">Answer 2</a></p>
</div>
<div class="jumbotron mandatory">
<h1>Question/Step 5 - mandatory/blocking</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<form class="form-signin">
<h2 class="form-signin-heading">Which is the ...</h2>
<label for="inputAnswer" class="sr-only">Answer</label>
<input type="answer" id="inputAnswer" class="form-control" placeholder="Answer" required>
<button class="btn btn-lg btn-primary btn-block" type="submit" id="formexample">Submit</button>
</form>
</div>
<div class="jumbotron">
<h1>Question/Step 6</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<div class="checkbox">
<label>
<input type="checkbox"> SELECTION ONE
</label>
<label>
<input type="checkbox"> SELECTION TWO
</label>
<label>
<input type="checkbox"> SELECTION THREE
</label>
</div>
</div>
<div class="jumbotron">
<h1>Question/Step 7</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. </p>
</div>
</div><!-- /.container -->
<!-- ================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>