-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (143 loc) · 6.34 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 name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simulador USAS Symptoms</title>
<link rel="icon" type="image/png" href="./images/logo-no-text-brain-symptoms.png">
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Schoolbell&display=swap" />
<script src="main.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<main>
<section class="chart-section">
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<div class="chart-inputs">
<input type="number" id="first" name="first" value="0" min="0" max="10" />
<input type="number" id="second" name="second" value="0" min="0" max="10" />
<input type="number" id="third" name="third" value="0" min="0" max="10" />
<input type="number" id="fourth" name="fourth" value="0" min="0" max="10" />
<input type="number" id="fifth" name="fifth" value="0" min="0" max="10" />
<input type="number" id="sixth" name="sixth" value="0" min="0" max="10" />
</div>
</div>
<div class="variables">
<label for="emotion-threshold">
Umbral emoción positiva:
<input type="number" id="emotion-threshold" name="emotion-threshold" value="5" min="0" max="10" />
</label>
<label for="peek-to-last-threshold">
Umbral diferencia entre máximo y último USAS:
<input type="number" id="peek-to-last-threshold" name="peek-to-last-threshold" value="2" min="0" max="10" />
</label>
</div>
</section>
<section class="error-tooltip important-hidden">
Los datos introducidos no son correctos.
</section>
<section id="result-section" class="result-section" hidden>
<div class="result-header">
<h1>Resultado:</h1>
<div class="result successful-tag successful">Exposición positiva 🤗</div>
<div class="result neutral-tag neutral" hidden>Exposición neutra 😐</div>
<div class="result failed-tag failed" hidden>Exposición fallida 😢</div>
</div>
<div class="result-explanation">
<h2>Variables usadas</h2>
<div class="variables-used">
<label class="successful neutral failed">
Último USAS:
<input class="last-usas-value" type="number" readonly value="0" />
</label>
<label class="successful neutral failed">
Umbral emoción positiva:
<input class="emotion-threshold-value" type="number" readonly value="5" />
</label>
<label class="neutral failed">
USAS máximo:
<input class="peek-usas-value" type="number" readonly value="0" />
</label>
<label class="neutral failed">
Umbral diferencia entre máximo y último USAS:
<input class="peek-to-last-threshold-value" type="number" readonly value="2" />
</label>
</div>
<h2>Explicación</h2>
<div class="successful">
<p>
Una exposición exitosa sucede cuando el <em>último USAS</em> es menor que el
<em class="emotion-threshold">umbral emoción positiva</em>. Por lo tanto:
</p>
<section class="blackboard">
<p class="formula">
Último USAS (<input type="number" class="last-usas-value" readonly value="0" />) < Umbral emoción
positiva (<input type="number" class="emotion-threshold-value" readonly value="5" />)
</p>
<u>Exposición positiva</u>
</section>
</div>
<div class="neutral" hidden>
<p>Una exposición neutra sucede cuando las siguientes dos condiciones se cumplen:</p>
<ol>
<li>El <em>último USAS</em> es mayor o igual a <em>umbral emoción positiva</em></li>
<li>
La diferencia entre <em>el último USAS</em> y el <em>USAS máximo</em> es igual o mayor a la variable
<em>umbral diferencia entre máximo y mínimo</em>
</li>
</ol>
<section class="blackboard">
<p class="formula">
Último USAS (<input type="number" class="last-usas-value" readonly value="0" />) ≥ Umbral emoción
positiva (<input type="number" class="emotion-threshold-value" readonly value="5" />)
</p>
<p class="formula">
USAS Máximo (<input type="number" class="peek-usas-value" readonly value="5" />) - Último USAS (<input
type="number"
class="last-usas-value"
readonly
value="0" />) ≥ Diferencia entre máx y último USAS (<input
type="number"
class="peek-to-last-threshold-value"
readonly
value="5" />)
</p>
<u>Exposición neutra</u>
</section>
</div>
<div class="failed" hidden>
<p>Una exposición fallida sucede cuando las siguientes condiciones se cumplen:</p>
<ol>
<li>El <em>último USAS</em> es mayor o igual a <em>umbral emoción positiva</em></li>
<li>
La diferencia entre <em>el último USAS</em> y el <em>USAS máximo</em> es menor a la variable
<em>umbral diferencia entre máximo y mínimo</em>
</li>
</ol>
<section class="blackboard">
<p class="formula">
Último USAS (<input type="number" class="last-usas-value" readonly value="5" />) ≥ Umbral emoción
positiva (<input type="number" class="emotion-threshold-value" readonly value="5" />)
</p>
<p class="formula">
USAS Máximo (<input type="number" class="peek-usas-value" readonly value="5" />) - Último USAS (<input
type="number"
class="last-usas-value"
readonly
value="0" />) < Diferencia entre máx y último USAS (<input
type="number"
class="peek-to-last-threshold-value"
readonly
value="5" />)
</p>
<u>Exposición fallida</u>
</section>
</div>
</div>
</section>
</main>
</body>
</html>