-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (130 loc) · 7.33 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
<!DOCTYPE html>
<html lang="en">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/68c6bccf2e.js" crossorigin="anonymous"></script>
<head>
<title>Teste para daltonismo</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<h1>Teste de Ishihara</h1>
<fieldset class = "field">
<legend><h2>Sobre o Teste</h2></legend>
<p>O Teste de Ishihara é usado para verifcar se uma pessoa é ou não portadora de <b>Daltonismo</b>, o teste é feito a partir da observação de placas coloridas com números e símbolos que irão mostrar imagens diferentes dependendo da capacidade de enxergar cores de uma pessoa.</p>
</fieldset>
<fieldset class = "field">
<legend> <h2>Descrição</h2> </legend>
<p>Os princípos utilizados para a realização dos testes a seguir foram baseados nos estudos das seguintes <a href="#links"> Referências</a>.Portanto, é recomendado que se consulte um <b>Oftalmologista</b> para resultados precisos e oficiais.</p>
</fieldset>
<fieldset class = "field">
<legend> <h2>Instruções</h2> </legend>
<p>aperte no botão <b><u>Começar Teste</u></b> observe as 7 imagens que aparecerão,mantenha a tela a uma distância de 50cm e à altura dos olhos, após isso, veja os resultados baseado no que você observou.</p>
</fieldset>
</header>
<main>
<button id ="testStart"> Comerçar teste </button>
<br>
<div id="images" hidden>
<h3 class="imageTitle">Primeira Imagem</h3>
<img src='https://www.imagemhost.com.br/images/2021/06/05/pngegg.png' alt='primeira imagem'>
<h3 class ="imageTitle">Segunda Imagem</h3>
<img src="https://www.imagemhost.com.br/images/2021/06/05/kisspng-ishihara-test-ishihara-s-tests-for-colour-deficien-5aedf5ffd88f53.8353121215255444478871-1.png" alt="kisspng-ishihara-test-ishihara-s-tests-for-colour-deficien-5aedf5ffd88f53.8353121215255444478871-1.png" border="0" />
<h3 class ="imageTitle">Terceira Imagem</h3>
<img src="https://www.imagemhost.com.br/images/2021/06/07/kisspng-color-blindness-ishihara-test-color-vision-visual-ishihara-s-tests-for-colour-deficiency-5b3be2273c85c8.5568586915306511752479.png" alt="">
<h3 class ="imageTitle">Quarta Imagem</h3>
<img src="https://www.imagemhost.com.br/images/2021/06/07/pngwing.com.png" alt="">
<h3 class="imageTitle">Quinta Imagem</h3>
<img src="https://www.imagemhost.com.br/images/2021/06/07/Capturar.png" alt="">
<h3 class="imageTitle">Sexta Imagem</h3>
<img src="https://www.imagemhost.com.br/images/2021/06/07/imagem6.png" alt="">
<h3 class="imageTitle">Sétima Imagem</h3>
<img src="https://www.imagemhost.com.br/images/2021/06/07/imagem-7.png" alt="">
</div>
<article id = "results" hidden>
<h2>Resultados</h2>
<fieldset>
<legend><h3>Primeira Imagem</h3></legend>
<ul>
<li><b>Visão Normal:</b>enxerga um 74</li>
<li><b>Daltonsimo:</b>enxerga um 21</li>
<li><b>Possível diagnóstico:</b>visão com deficiência para enxergar o <u>verde e o vermelho(Deuteranopia ou Protanomalia)</u></li>
</ul>
</fieldset>
<fieldset>
<legend><h3>Segunda Imagem</h3></legend>
<ul>
<li><b>Visão Normal:</b>enxerga um 42</li>
<li><b>Daltonismo:</b>dificuldade em enxergar o 4 ou o 2</li>
<li><b>Possível diagnóstico:</b><u>Protanomalia(daltonismo leve para vermeho)</u> ou <u>Deuteranopia(daltonismo de verde)</u> para quem enxerga o 4.<u> Protanopia(daltonismo de vermelho)</u> ou <u>Deuteranomalia(daltonismo leve de verde)</u> para quem enxerga o 2</li>
</ul>
</fieldset>
<fieldset>
<legend><h3>Terceira Imagem</h3></legend>
<ul>
<li><b>Visão Normal:</b>enxerga um 6</li>
<li><b>Daltonismo:</b> não enxerga nenhum número</li>
<li><b>Possível diagnóstico:</b>daltonismo tanto para <u>verde(Deuteranopia)</u> quanto para <u>vermelho (Protanomalia)</u></li>
</ul>
</fieldset>
<fieldset>
<legend><h3>Quarta Imagem</h3></legend>
<ul>
<li><b>Visão Normal:</b>Não enxerga nenhum número</li>
<li><b>Daltonismo:</b>enxerga um 45</li>
<li><b>Possível diagnóstico:</b><u>Daltonismo para verde(Deuteranopia)</u> ou <u>vermelho(Protanomalia)</u></li>
</ul>
</fieldset>
<fieldset>
<legend><h3>Quinta Imagem</h3></legend>
<ul>
<li><b>Visão Normal:</b>Enxerga um 29</li>
<li><b>Daltonismo:</b>Enxergar um 70</li>
<li><b>Possível diagnóstico:</b><u>Daltonismo para verde(Deuteranopia)</u> e <u>vermelho(Protanomalia)</u></li>
</ul>
</fieldset>
<fieldset>
<legend><h3>Sexta Imagem</h3></legend>
<ul>
<li><b>Visão Normal:</b>Enxerga uma linha vermelha e outra roxa</li>
<li><b>Daltonismo:</b>enxergará somente uma das linhas</li>
<li><b>Possível diagnóstico:</b>Caso enxergue somente a linha vermelha
<u>Deuteranopia(Daltonismo para verde)</u>, caso enxergue somente a linha roxa,<u>Protanomalia(Daltonismo para o vermelho)</u></li>
</ul>
</fieldset>
<fieldset>
<legend><h3>Sétima Imagem</h3></legend>
<ul>
<li><b>Visão Normal:</b>Enxerga um 26</li>
<li><b>Daltonismo:</b>Enxergará somente o 2 ou 6 </li>
<li><b>Possível diagnóstico:</b>Caso enxergue somente o 2,<u>Deuteranopia(daltonismo para o verde)</u>, caso enxergue somente o 6 <u>Protanomalia</u></li>
</ul>
</fieldset>
</article>
</main>
<ul>
<fieldset id="links">
<legend><h3 >Links utilizados</h3></legend>
<li><a href="https://fatecgarca.edu.br/ojs/index.php/efatec/article/view/61/58" target = "_blank">Aplicação da Interação Humano Computador no Desenvolvimento de Interfaces Gráficas Destinadas a Daltônicos</a></li>
<br>
<li><a href="https://periodicos.fclar.unesp.br/rpge/article/view/10021/6604" target = "_blank">Inclusão Pdagógico Cultural-Daltonismo e o Ensino de Cores na Educação Infantil</a></li>
<br>
<li><a href="https://www.scielo.br/j/physis/a/5hWpcHND39fq6BWtB3ZTsbM/?lang=pt" target = "_blank">Os "daltônicos" e suas dificuldades: condição negligenciada no Brasil? </a></li>
<br>
<li><a href="https://www.youtube.com/watch?v=VUq_Y3sUYO4&t=307s&ab_channel=DoctorEyeHealthDoctorEyeHealth">The Ishihara Color Blind Test(Are You Colorblind?)</a><b>(Video)</b></li>
<br>
<li><a href="https://www.youtube.com/watch?v=2FkYGo_VzOg&t=69s">Teste de Daltonismo(Teste de Ishihara)</a><b>(Video)</b></li>
</ul>
</fieldset>
<script src ="app.js" ></script>
</body>
<footer style = "text-align: center">
©<time datetime = "">criado no dia 9<sup></sup> de Janeiro de 2021</time>, esse website foi criado por Mário Roberto, Brasileiro aspirante a desenvolvedor front-end
</footer>
<hr>
<section style = "text-align: center ; display: flex ; flex-direction: column "><b>Contato(s) do desenvolvedor:</b>
<div style = "display: flex ; justify-content: center"><div><i class="fab fa-whatsapp"></i></div><a href = "https://api.whatsapp.com/send?phone=5591988685722&text=Quero%20dar%20meu%20feedback" target = "_blank">Whatsapp</a></div>
<div style = "display: flex ; justify-content: center"><div><i class="fab fa-instagram"></i></div><a href = "https://www.instagram.com/mari0_2000/" target = "_blank">Instagram</a></div>
</section>
</html>