-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (112 loc) · 6.62 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
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Complete the True Colors personality quiz">
<title>True Colors Exercise</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
</head>
<script defer src="/_vercel/insights/script.js"></script>
<body onload="accessSessionValues()" id="home">
<form onsubmit="return onSubmit();" action="success.html" id="true-colors">
<h1>True Colors Assessment</h1>
<p>Compare all 4 boxes in each row/section. Do not analyze each word; just get a sense of each box. Score each of the four boxes in each row, from most like you to least like you: <b>4 = most, 3 = a lot, 2 = somewhat, 1 = least.</b></p>
<fieldset class="input-row blue-background" id="row-1">
<div class="input-cell">
<label for="orange">active <br> opportunistic <br> spontaneous<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" inputmode="numeric" class="orange" />
</div>
<div class="input-cell">
<label>parental <br> traditional <br> responsible<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="gold" />
</div>
<div class="input-cell">
<label>authentic <br> harmonious <br> compassionate<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="blue" />
</div>
<div class="input-cell">
<label>versatile <br> inventive <br> competent<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="green" />
</div>
</fieldset>
<fieldset class="input-row grey-background">
<div class="input-cell">
<label>curious <br> conceptual <br> knowledgeable<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="green" />
</div>
<div class="input-cell">
<label>unique <br> empathetic <br> communicative<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="blue" />
</div>
<div class="input-cell">
<label>practical <br> sensible <br> dependable<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="gold" />
</div>
<div class="input-cell">
<label>competitive <br> impetuous <br> impactful<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="orange" />
</div>
</fieldset>
<fieldset class="input-row blue-background">
<div class="input-cell">
<label>loyal <br> conservative <br> organized<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="gold" />
</div>
<div class="input-cell">
<label>devoted <br> warm <br> poetic<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="blue" />
</div>
<div class="input-cell">
<label>realistic <br> open-minded <br> adventuresome<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="orange" />
</div>
<div class="input-cell">
<label>theoretical <br> seeking <br> ingenious<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="green" />
</div>
</fieldset>
<fieldset class="input-row grey-background">
<div class="input-cell">
<label>concerned <br> procedural <br> cooperative<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="gold" />
</div>
<div class="input-cell">
<label>daring <br> impulsive <br> fun<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="orange" />
</div>
<div class="input-cell">
<label>tender <br> inspirational <br> dramatic<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="blue" />
</div>
<div class="input-cell">
<label>determined <br> complex <br> composed<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="green" />
</div>
</fieldset>
<fieldset class="input-row blue-background">
<div class="input-cell">
<label>philosophical <br> principled <br> rational<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="green" />
</div>
<div class="input-cell">
<label>vivacious <br> affectionate <br> sympathetic<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="blue" />
</div>
<div class="input-cell">
<label>exciting <br> courageous <br> skillful<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="orange" />
</div>
<div class="input-cell">
<label>orderly <br> conventional <br> caring<br> </label>
<input type="text" pattern="[1-4]{1}" required inputmode="numeric" class="gold" />
</div>
</fieldset>
<br/>
<input type="submit" value="Submit">
</form>
<footer><p>Skip to <a href="facilitation.html">Facilitation Guide</a></p><p>Project by <a href="https://github.com/aligg/true-colors" target="_blank">Ali Glenesk</a></p></footer>
<script src="script.js"></script>
</body>
</html>