wagtail-enap-designsystem 1.2.1.201__py3-none-any.whl → 1.2.1.203__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of wagtail-enap-designsystem might be problematic. Click here for more details.

@@ -35,27 +35,125 @@
35
35
 
36
36
  {% block extra_css %}
37
37
  <style>
38
+ /* Estilos para o formulário de perguntas */
39
+ .quiz-container {
40
+ max-width: 1200px;
41
+ margin: 0 auto;
42
+ padding: 2rem;
43
+ font-family: 'Roboto', sans-serif;
44
+ }
45
+
46
+ .question-number {
47
+ display: inline-block;
48
+ width: 36px;
49
+ height: 36px;
50
+ background-color: #024248;
51
+ color: white;
52
+ border-radius: 50%;
53
+ text-align: center;
54
+ line-height: 36px;
55
+ font-weight: bold;
56
+ margin-right: 10px;
57
+ vertical-align: middle;
58
+ }
59
+
60
+ .question-subtitle {
61
+ margin-left: 46px;
62
+ margin-bottom: 1.5rem;
63
+ color: #666;
64
+ font-size: 0.95rem;
65
+ }
66
+
67
+ .options-grid {
68
+ display: grid;
69
+ grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
70
+ gap: 1rem;
71
+ margin-top: 1rem;
72
+ }
73
+
74
+ .option-card {
75
+ background-color: white;
76
+ border: 1px solid #ddd;
77
+ border-radius: 8px;
78
+ padding: 1rem;
79
+ cursor: pointer;
80
+ transition: all 0.3s ease;
81
+ display: flex;
82
+ align-items: center;
83
+ }
84
+
85
+ .option-card:hover {
86
+ border-color: #024248;
87
+ box-shadow: 0 0 10px rgba(7, 29, 65, 0.1);
88
+ }
89
+
90
+ .option-card.selected {
91
+ border-color: #024248;
92
+ background-color: rgba(7, 29, 65, 0.05);
93
+ }
94
+
95
+ .option-checkbox {
96
+ margin-right: 12px;
97
+ }
98
+
99
+ .option-icon {
100
+ margin-right: 12px;
101
+ font-size: 1.2rem;
102
+ width: 24px;
103
+ color: #024248;
104
+ }
105
+
106
+ .option-text {
107
+ font-weight: 500;
108
+ }
109
+
110
+ /* Estilo para os cards selecionados múltiplos */
111
+ .badge-filtros {
112
+ display: flex;
113
+ flex-wrap: wrap;
114
+ gap: 8px;
115
+ margin: 15px 0;
116
+ }
38
117
 
118
+ .badge-filtro {
119
+ background-color: #E3F2FD;
120
+ border: 1px solid #2196F3;
121
+ border-radius: 20px;
122
+ padding: 6px 12px;
123
+ font-size: 14px;
124
+ display: inline-flex;
125
+ align-items: center;
126
+ color: #0D47A1;
127
+ }
128
+
129
+ .badge-filtro .remove-badge {
130
+ margin-left: 8px;
131
+ cursor: pointer;
132
+ font-size: 16px;
133
+ }
39
134
  </style>
40
135
  {% endblock %}
41
136
 
42
137
  {% block content %}
43
138
  {% if e_resultado %}
44
139
  <!-- TELA DE RESULTADO -->
45
- <div class="resultado-rotas">
140
+ <div class="mapa-personalizado">
46
141
  <div class="container">
47
- <header class="resultado-header">
48
- <h1>✅ Suas Recomendações Personalizadas</h1>
142
+ <div class="header-icon">
143
+ <div class="icon-circle">
144
+ <i class="fas fa-star-sparkles"></i>
145
+ </div>
146
+ </div>
147
+
148
+ <header class="mapa-header">
149
+ <h1>Seu Mapa Personalizado</h1>
49
150
 
50
- <div class="resumo-respostas">
51
- <h3>Com base no seu perfil:</h3>
52
- <ul class="badges-respostas">
53
- {% for chave, resposta in respostas.items %}
54
- <li class="badge">
55
- {{ resposta.texto }}
56
- </li>
57
- {% endfor %}
58
- </ul>
151
+ <div class="categoria-badge">
152
+ {% for chave, resposta in respostas.items %}
153
+ {% if forloop.first %}
154
+ {{ resposta.texto|upper }}
155
+ {% endif %}
156
+ {% endfor %}
59
157
  </div>
60
158
 
61
159
  {% if page.texto_resultado %}
@@ -65,379 +163,505 @@
65
163
  {% endif %}
66
164
  </header>
67
165
 
68
- <div class="acoes-resultado">
69
- <button onclick="window.print()" class="button button-outline">
70
- 📄 Salvar / Imprimir PDF
71
- </button>
72
-
73
- <a href="{{ page.url }}" class="button button-primary">
74
- 🔄 Fazer novo quiz
75
- </a>
166
+ <div class="capsula-principal">
167
+ <div class="capsula-card-two">
168
+ <div class="card-icon">
169
+ <div class="icon-target">
170
+ <i class="fas fa-bullseye"></i>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="card-content">
175
+ <div class="comece-aqui">
176
+ <span class="rocket-icon">🚀</span> COMECE AQUI
177
+ </div>
178
+
179
+ {% if capsulas_recomendadas.0 %}
180
+ <h2 class="capsula-title">{{ capsulas_recomendadas.0.title }}</h2>
181
+ <p class="capsula-subtitle">{{ capsulas_recomendadas.0.resumo_card }}</p>
182
+
183
+ <div class="action-button">
184
+ <a href="{{ capsulas_recomendadas.0.url }}" class="btn primary large">
185
+ <i class="fas fa-book-open"></i> Acessar Cápsula
186
+ </a>
187
+ </div>
188
+ {% else %}
189
+ <h2 class="capsula-title">Nenhuma cápsula encontrada</h2>
190
+ <p class="capsula-subtitle">Não encontramos cápsulas para os critérios selecionados.</p>
191
+ {% endif %}
192
+ </div>
193
+ </div>
76
194
  </div>
77
195
 
78
- <section class="capsulas-recomendadas">
79
- <h2>
80
- Encontramos {{ total_capsulas }}
81
- {% if total_capsulas == 1 %}cápsula{% else %}cápsulas{% endif %}
82
- para você
83
- </h2>
84
-
85
- {% if capsulas_recomendadas %}
86
- <div class="recursos-grid">
196
+ {% if capsulas_recomendadas|length > 1 %}
197
+ <section class="proximos-passos">
198
+ <h2 class="section-title">
199
+ <span class="section-icon-two"><i class="fas fa-route"></i></span> Seus próximos passos
200
+ </h2>
201
+ <p class="section-subtitle">Continue sua jornada com estas cápsulas complementares</p>
202
+
203
+ <div class="capsulas-complementares">
87
204
  {% for capsula in capsulas_recomendadas %}
88
- <article class="recurso-card">
89
- <!-- Link principal que envolve todo o card -->
90
- <a href="{{ capsula.url }}" class="recurso-card-link" aria-labelledby="card-titulo-{{ forloop.counter }}">
91
- <span class="sr-only">Acessar cápsula: {{ capsula.title }}</span>
92
-
93
-
94
- <div class="recurso-card-icone">
95
- <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
96
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
97
- </svg>
205
+ {% if not forloop.first %}
206
+ <a href="{{ capsula.url }}" class="capsula-item">
207
+ <div class="item-number">{{ forloop.counter0 }}</div>
208
+ <div class="item-content">
209
+ <h3 class="item-title">{{ capsula.title }}</h3>
98
210
  </div>
99
-
100
- <h2 class="recurso-card-titulo" id="card-titulo-{{ forloop.counter }}">
101
- {{ capsula.title }}
102
- </h2>
103
-
104
- <p class="recurso-card-descricao">
105
- {{ capsula.resumo_card|default:"Aprenda sobre este importante aspecto da acessibilidade digital." }}
106
- </p>
107
-
108
- {# Tags de deficiência #}
109
- {% if capsula.tipos_deficiencia %}
110
- <div class="recurso-tags-categoria" aria-label="Tipos de deficiência abordados">
111
- {% for tipo in capsula.tipos_deficiencia|slice:":2" %}
112
- <span class="tag-categoria">
113
- {{ tipo }}
114
- </span>
115
- {% endfor %}
211
+ <div class="item-action">
212
+ <div class="item-link">
213
+ <i class="fas fa-arrow-right"></i>
116
214
  </div>
117
- {% endif %}
118
-
119
- {# Badge de prioridade #}
120
- {% if capsula.prioridade %}
121
- <div class="recurso-badge recurso-badge-{{ capsula.prioridade }}" aria-label="Nível de prioridade">
122
- <svg class="badge-icone" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
123
- <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
124
- </svg>
125
- {% if capsula.prioridade == 'obrigatorio' %}
126
- Obrigatório
127
- {% else %}
128
- Recomendado
129
- {% endif %}
130
- </div>
131
- {% endif %}
132
-
133
- <div class="recurso-card-botao-wrapper">
134
- <span class="recurso-card-botao">
135
- Ler cápsula completa
136
- </span>
137
215
  </div>
138
- </a>
139
- </article>
140
- {% endfor %}
141
- </div>
142
-
143
- {% else %}
144
- <div class="conteudo-vazio">
145
- <svg class="conteudo-vazio-icone" fill="none" stroke="currentColor" viewBox="0 0 24 24">
146
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
147
- </svg>
148
- <h2>Não encontramos cápsulas específicas para este perfil ainda.</h2>
149
- <p>Tente ajustar os filtros ou <a href="{{ page.url }}">limpe os filtros</a> para ver todas as cápsulas.</p>
216
+ </a>
217
+ </div>
218
+ {% endif %}
219
+ {% endfor %}
150
220
  </div>
151
- {% endif %}
152
- </section>
221
+ </section>
222
+ {% endif %}
223
+
224
+ <div class="acoes-resultado">
225
+ <a href="{{ page.url }}" class="btn secondary">
226
+ <i class="fa-solid fa-refresh"></i> Refazer quiz
227
+ </a>
228
+
229
+ <button onclick="window.print()" class="btn primary">
230
+ <i class="fa-solid fa-print"></i> Salvar PDF
231
+ </button>
232
+ </div>
153
233
  </div>
154
234
  </div>
155
-
156
235
  {% else %}
157
- <!-- TELA DO QUIZ -->
236
+
237
+ <!-- TELA DE PERGUNTAS -->
158
238
  <div class="quiz-container">
159
- <!-- Lado esquerdo - informações e ilustração -->
160
- <div class="quiz-info">
161
- <div>
162
- <a href="/" class="home-link">
163
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
164
- <path d="M19 12H5" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
165
- <path d="M12 19L5 12L12 5" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
166
- </svg>
167
- Inicio
168
- </a>
169
-
170
-
171
-
172
- <h1 class="question-title">Vamos fazer o seu mapa?</h1>
173
- <p class="question-subtitle">Nos diga o que você vai produzir</p>
174
- </div>
175
-
176
- <div class="capsulas-illustration-card">
177
- <img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Designer_re_5v95.svg" alt="Ilustração de implementação" class="capsulas-illustration">
178
- </div>
239
+ <div class="quiz-header">
240
+ <h1>Quiz de Recomendações Personalizadas</h1>
241
+ {{ page.introducao|richtext }}
179
242
  </div>
180
243
 
181
- <!-- Lado direito - perguntas e opções -->
182
- <div class="quiz-questions">
183
- <!-- Pergunta 1 -->
184
- <div class="pergunta-card" id="pergunta1" style="display: block;">
185
- <div class="options-container">
186
- <div class="capsulas-illustration">
187
- <img class="capsulas-illustration" src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/Questions_re_1fy7.svg"
188
- alt="Ilustração representando o conceito da seção 'O que é'"
189
- width="240"
190
- height="240">
191
- </div>
192
- <div id="stepIndicator" class="step-indicator">step <span id="currentStep">1</span>/<span id="totalSteps">2</span></div>
193
- <button class="option-button" onclick="responderPergunta1('designer_instrucional', 'Designer Instrucional')">
194
- <div class="option-circle"></div>
195
- <span class="option-text">Designer Instrucional</span>
196
- </button>
244
+ <form id="quiz-form">
245
+ <!-- Pergunta 1 - Perfil Profissional (para todos) -->
246
+ <div class="question-block" id="pergunta1">
247
+ <span class="question-number">1</span>
248
+ <h2 class="question-title">Qual o seu perfil profissional?</h2>
249
+ <p class="question-subtitle">Selecione uma ou mais opções que mais se aproximam da sua atuação</p>
250
+
251
+ <div class="badge-filtros" id="filtros-perfil"></div>
252
+
253
+ <div class="options-grid">
254
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta1', 'designer_instrucional', 'Designer instrucional')">
255
+ <input type="checkbox" class="option-checkbox" name="pergunta1" value="designer_instrucional">
256
+ <i class="option-icon fa-solid fa-pencil-ruler"></i>
257
+ <span class="option-text">Designer instrucional</span>
258
+ </label>
197
259
 
198
- <button class="option-button" onclick="responderPergunta1('designer_grafico', 'Designer Gráfico')">
199
- <div class="option-circle"></div>
200
- <span class="option-text">Designer Gráfico</span>
201
- </button>
260
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta1', 'designer_grafico', 'Designer gráfico')">
261
+ <input type="checkbox" class="option-checkbox" name="pergunta1" value="designer_grafico">
262
+ <i class="option-icon fa-solid fa-pen-fancy"></i>
263
+ <span class="option-text">Designer gráfico</span>
264
+ </label>
202
265
 
203
- <button class="option-button" onclick="responderPergunta1('docente', 'Docente')">
204
- <div class="option-circle"></div>
205
- <span class="option-text">Docente</span>
206
- </button>
266
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta1', 'implementador_web', 'Implementador web')">
267
+ <input type="checkbox" class="option-checkbox" name="pergunta1" value="implementador_web">
268
+ <i class="option-icon fa-solid fa-code"></i>
269
+ <span class="option-text">Implementador web</span>
270
+ </label>
207
271
 
208
- <button class="option-button" onclick="responderPergunta1('implementador_web', 'Implementador Web', true)">
209
- <div class="option-circle"></div>
210
- <span class="option-text">Implementador Web</span>
211
- </button>
272
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta1', 'editor_video', 'Editor de vídeo')">
273
+ <input type="checkbox" class="option-checkbox" name="pergunta1" value="editor_video">
274
+ <i class="option-icon fa-solid fa-film"></i>
275
+ <span class="option-text">Editor de vídeo</span>
276
+ </label>
212
277
 
213
- <button class="option-button" onclick="responderPergunta1('editor_video', 'Editor de Vídeo', true)">
214
- <div class="option-circle"></div>
215
- <span class="option-text">Editor de Vídeo</span>
216
- </button>
278
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta1', 'docente', 'Docente')">
279
+ <input type="checkbox" class="option-checkbox" name="pergunta1" value="docente">
280
+ <i class="option-icon fa-solid fa-chalkboard-teacher"></i>
281
+ <span class="option-text">Docente</span>
282
+ </label>
217
283
 
218
- <button class="option-button" onclick="responderPergunta1('curador_conteudo', 'Curador de Conteúdo')">
219
- <div class="option-circle"></div>
220
- <span class="option-text">Curador de Conteúdo</span>
221
- </button>
284
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta1', 'curador_conteudo', 'Curador de conteúdo')">
285
+ <input type="checkbox" class="option-checkbox" name="pergunta1" value="curador_conteudo">
286
+ <i class="option-icon fa-solid fa-tasks"></i>
287
+ <span class="option-text">Curador de conteúdo</span>
288
+ </label>
222
289
 
223
- <button class="option-button" onclick="responderPergunta1('conteudista', 'Conteudista')">
224
- <div class="option-circle"></div>
290
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta1', 'conteudista', 'Conteudista')">
291
+ <input type="checkbox" class="option-checkbox" name="pergunta1" value="conteudista">
292
+ <i class="option-icon fa-solid fa-feather-alt"></i>
225
293
  <span class="option-text">Conteudista</span>
226
- </button>
294
+ </label>
227
295
  </div>
296
+ </div>
297
+
298
+ <!-- Pergunta 2 - Formato de Ação (condicional, só aparece para docente, curador, conteudista) -->
299
+ <div class="question-block" id="pergunta2_formato">
300
+ <span class="question-number">2</span>
301
+ <h2 class="question-title">Qual o formato da ação de desenvolvimento?</h2>
302
+ <p class="question-subtitle">Selecione uma ou mais opções que melhor descrevem seu contexto</p>
228
303
 
229
- <div class="navigation-buttons">
230
- <button class="button button-outline" onclick="window.location.href = '/'">Anterior</button>
231
- <button id="nextButton1" class="button button-primary" disabled>Próximo</button>
304
+ <div class="badge-filtros" id="filtros-formato"></div>
305
+
306
+ <div class="options-grid">
307
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta2_formato', 'distancia_sincrono', 'A distância síncrono')">
308
+ <input type="checkbox" class="option-checkbox" name="pergunta2_formato" value="distancia_sincrono">
309
+ <i class="option-icon fa-solid fa-satellite-dish"></i>
310
+ <span class="option-text">A distância síncrono</span>
311
+ </label>
312
+
313
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta2_formato', 'distancia_assincrono', 'A distância assíncrono')">
314
+ <input type="checkbox" class="option-checkbox" name="pergunta2_formato" value="distancia_assincrono">
315
+ <i class="option-icon fa-solid fa-clock"></i>
316
+ <span class="option-text">A distância assíncrono</span>
317
+ </label>
318
+
319
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta2_formato', 'presencial', 'Presencial')">
320
+ <input type="checkbox" class="option-checkbox" name="pergunta2_formato" value="presencial">
321
+ <i class="option-icon fa-solid fa-users"></i>
322
+ <span class="option-text">Presencial</span>
323
+ </label>
324
+
325
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta2_formato', 'semipresencial', 'Semipresencial')">
326
+ <input type="checkbox" class="option-checkbox" name="pergunta2_formato" value="semipresencial">
327
+ <i class="option-icon fa-solid fa-laptop-house"></i>
328
+ <span class="option-text">Semipresencial</span>
329
+ </label>
232
330
  </div>
233
331
  </div>
234
332
 
235
- <!-- Pergunta 2a -->
236
- <div class="pergunta-card" id="pergunta2a" style="display: none;">
237
- <div class="options-container">
238
- <button class="option-button" onclick="responderPergunta2a('imagem', 'Imagem')">
239
- <div class="option-circle"></div>
333
+ <!-- Pergunta 3 - Tipo de Recurso (para todos) -->
334
+ <div class="question-block" id="pergunta3_recurso">
335
+ <span class="question-number">3</span>
336
+ <h2 class="question-title">Qual tipo de recurso?</h2>
337
+ <p class="question-subtitle">Elemento prático a que se aplica</p>
338
+
339
+ <div class="badge-filtros" id="filtros-recurso"></div>
340
+
341
+ <div class="options-grid">
342
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta3_recurso', 'imagem', 'Imagem')">
343
+ <input type="checkbox" class="option-checkbox" name="pergunta3_recurso" value="imagem">
344
+ <i class="option-icon fa-solid fa-image"></i>
240
345
  <span class="option-text">Imagem</span>
241
- </button>
346
+ </label>
242
347
 
243
- <button class="option-button" onclick="responderPergunta2a('video', 'Vídeo')">
244
- <div class="option-circle"></div>
348
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta3_recurso', 'video', 'Vídeo')">
349
+ <input type="checkbox" class="option-checkbox" name="pergunta3_recurso" value="video">
350
+ <i class="option-icon fa-solid fa-film"></i>
245
351
  <span class="option-text">Vídeo</span>
246
- </button>
352
+ </label>
247
353
 
248
- <button class="option-button" onclick="responderPergunta2a('tabela', 'Tabela')">
249
- <div class="option-circle"></div>
354
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta3_recurso', 'tabela', 'Tabela')">
355
+ <input type="checkbox" class="option-checkbox" name="pergunta3_recurso" value="tabela">
356
+ <i class="option-icon fa-solid fa-table"></i>
250
357
  <span class="option-text">Tabela</span>
251
- </button>
358
+ </label>
252
359
 
253
- <button class="option-button" onclick="responderPergunta2a('grafico', 'Gráfico')">
254
- <div class="option-circle"></div>
360
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta3_recurso', 'grafico', 'Gráfico')">
361
+ <input type="checkbox" class="option-checkbox" name="pergunta3_recurso" value="grafico">
362
+ <i class="option-icon fa-solid fa-chart-bar"></i>
255
363
  <span class="option-text">Gráfico</span>
256
- </button>
364
+ </label>
365
+
366
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta3_recurso', 'botao', 'Botão')">
367
+ <input type="checkbox" class="option-checkbox" name="pergunta3_recurso" value="botao">
368
+ <i class="option-icon fa-solid fa-toggle-on"></i>
369
+ <span class="option-text">Botão</span>
370
+ </label>
257
371
 
258
- <button class="option-button" onclick="responderPergunta2a('texto', 'Texto')">
259
- <div class="option-circle"></div>
372
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta3_recurso', 'texto', 'Texto')">
373
+ <input type="checkbox" class="option-checkbox" name="pergunta3_recurso" value="texto">
374
+ <i class="option-icon fa-solid fa-file-alt"></i>
260
375
  <span class="option-text">Texto</span>
261
- </button>
376
+ </label>
262
377
 
263
- <button class="option-button" onclick="responderPergunta2a('audio', 'Áudio')">
264
- <div class="option-circle"></div>
378
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta3_recurso', 'audio', 'Áudio')">
379
+ <input type="checkbox" class="option-checkbox" name="pergunta3_recurso" value="audio">
380
+ <i class="option-icon fa-solid fa-volume-up"></i>
265
381
  <span class="option-text">Áudio</span>
266
- </button>
382
+ </label>
267
383
 
268
- <button class="option-button" onclick="responderPergunta2a('botao', 'Botão/Interface')">
269
- <div class="option-circle"></div>
270
- <span class="option-text">Botão/Interface</span>
271
- </button>
272
-
273
- <button class="option-button" onclick="responderPergunta2a('hiperlink', 'Hiperlink')">
274
- <div class="option-circle"></div>
384
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta3_recurso', 'hiperlink', 'Hiperlink')">
385
+ <input type="checkbox" class="option-checkbox" name="pergunta3_recurso" value="hiperlink">
386
+ <i class="option-icon fa-solid fa-link"></i>
275
387
  <span class="option-text">Hiperlink</span>
276
- </button>
388
+ </label>
277
389
 
278
- <button class="option-button" onclick="responderPergunta2a('videoconferencia', 'Videoconferência')">
279
- <div class="option-circle"></div>
390
+ <label class="option-card" onclick="selecionarOpcaoMultipla(this, 'pergunta3_recurso', 'videoconferencia', 'Videoconferência')">
391
+ <input type="checkbox" class="option-checkbox" name="pergunta3_recurso" value="videoconferencia">
392
+ <i class="option-icon fa-solid fa-video"></i>
280
393
  <span class="option-text">Videoconferência</span>
281
- </button>
282
- </div>
283
-
284
- <div class="navigation-buttons">
285
- <button class="button button-outline" onclick="voltarPergunta1()">Anterior</button>
286
- <button id="nextButton2a" class="button button-primary" disabled>Próximo</button>
394
+ </label>
287
395
  </div>
288
396
  </div>
289
397
 
290
- <!-- Pergunta 2b -->
291
- <div class="pergunta-card" id="pergunta2b" style="display: none;">
292
- <div class="options-container">
293
- <button class="option-button" onclick="responderPergunta2b('distancia_sincrono', 'A distância síncrono')">
294
- <div class="option-circle"></div>
295
- <span class="option-text">A distância síncrono</span>
296
- </button>
297
-
298
- <button class="option-button" onclick="responderPergunta2b('distancia_assincrono', 'A distância assíncrono')">
299
- <div class="option-circle"></div>
300
- <span class="option-text">A distância assíncrono</span>
301
- </button>
302
-
303
- <button class="option-button" onclick="responderPergunta2b('presencial', 'Presencial')">
304
- <div class="option-circle"></div>
305
- <span class="option-text">Presencial</span>
306
- </button>
307
-
308
- <button class="option-button" onclick="responderPergunta2b('semipresencial', 'Semipresencial')">
309
- <div class="option-circle"></div>
310
- <span class="option-text">Semipresencial</span>
311
- </button>
312
- </div>
313
-
314
- <div class="navigation-buttons">
315
- <button class="button button-outline" onclick="voltarPergunta1()">Anterior</button>
316
- <button id="nextButton2b" class="button button-primary" disabled>Próximo</button>
317
- </div>
398
+ <div class="form-buttons">
399
+ <button type="button" class="btn large secondary" onclick="limparFormulario()">Limpar respostas</button>
400
+ <button type="button" class="btn large primary" onclick="enviarFormulario()">Ver minhas recomendações <i class="fa-solid fa-circle-chevron-right"></i></button>
318
401
  </div>
319
- </div>
402
+ </form>
320
403
  </div>
321
404
  {% endif %}
322
405
 
323
406
  <script>
324
- let respostas = {};
407
+ // Objeto para armazenar as respostas (múltiplas seleções)
408
+ let respostas = {
409
+ perfil_profissional: [], // Array de objetos {valor, texto}
410
+ formato_acao: [],
411
+ tipo_recurso: []
412
+ };
325
413
 
326
- function construirUrlResultado() {
327
- let params = new URLSearchParams();
414
+ // Função para selecionar uma opção (seleção múltipla)
415
+ function selecionarOpcaoMultipla(element, perguntaId, valor, texto) {
416
+ // Verifica se o checkbox está marcado
417
+ const checkbox = element.querySelector('input[type="checkbox"]');
418
+ const isSelected = element.classList.contains('selected');
328
419
 
329
- if (respostas.perfil_profissional) {
330
- params.append('perfil', respostas.perfil_profissional.valor);
331
- params.append('perfil_texto', respostas.perfil_profissional.texto);
420
+ // Toggle da seleção
421
+ if (isSelected) {
422
+ // Remover seleção
423
+ element.classList.remove('selected');
424
+ checkbox.checked = false;
425
+
426
+ // Remover do array de respostas
427
+ if (perguntaId === 'pergunta1') {
428
+ respostas.perfil_profissional = respostas.perfil_profissional.filter(item => item.valor !== valor);
429
+ }
430
+ else if (perguntaId === 'pergunta2_formato') {
431
+ respostas.formato_acao = respostas.formato_acao.filter(item => item.valor !== valor);
432
+ }
433
+ else if (perguntaId === 'pergunta3_recurso') {
434
+ respostas.tipo_recurso = respostas.tipo_recurso.filter(item => item.valor !== valor);
435
+ }
436
+
437
+ // Atualizar badges
438
+ atualizarBadges();
439
+ } else {
440
+ // Adicionar seleção
441
+ element.classList.add('selected');
442
+ checkbox.checked = true;
443
+
444
+ // Adicionar ao array de respostas
445
+ if (perguntaId === 'pergunta1') {
446
+ respostas.perfil_profissional.push({
447
+ valor: valor,
448
+ texto: texto
449
+ });
450
+
451
+ // Se selecionou Docente, Curador ou Conteudista, mostra pergunta de formato
452
+ if (valor === 'docente' || valor === 'curador_conteudo' || valor === 'conteudista') {
453
+ document.getElementById('pergunta2_formato').style.display = 'block';
454
+ }
455
+ }
456
+ else if (perguntaId === 'pergunta2_formato') {
457
+ respostas.formato_acao.push({
458
+ valor: valor,
459
+ texto: texto
460
+ });
461
+ }
462
+ else if (perguntaId === 'pergunta3_recurso') {
463
+ respostas.tipo_recurso.push({
464
+ valor: valor,
465
+ texto: texto
466
+ });
467
+ }
468
+
469
+ // Atualizar badges
470
+ atualizarBadges();
332
471
  }
472
+ }
473
+
474
+ // Função para atualizar os badges de seleção
475
+ function atualizarBadges() {
476
+ // Atualizar badges de perfil
477
+ const badgesPerfil = document.getElementById('filtros-perfil');
478
+ badgesPerfil.innerHTML = '';
333
479
 
334
- if (respostas.tipo_recurso) {
335
- params.append('recurso', respostas.tipo_recurso.valor);
336
- params.append('recurso_texto', respostas.tipo_recurso.texto);
337
- }
480
+ respostas.perfil_profissional.forEach(item => {
481
+ const badge = document.createElement('div');
482
+ badge.className = 'badge-filtro';
483
+ badge.innerHTML = `
484
+ ${item.texto}
485
+ <span class="remove-badge" onclick="removerFiltro('perfil_profissional', '${item.valor}')">&times;</span>
486
+ `;
487
+ badgesPerfil.appendChild(badge);
488
+ });
338
489
 
339
- if (respostas.formato_acao) {
340
- params.append('formato', respostas.formato_acao.valor);
341
- params.append('formato_texto', respostas.formato_acao.texto);
342
- }
490
+ // Atualizar badges de formato
491
+ const badgesFormato = document.getElementById('filtros-formato');
492
+ badgesFormato.innerHTML = '';
343
493
 
344
- params.append('resultado', '1');
494
+ respostas.formato_acao.forEach(item => {
495
+ const badge = document.createElement('div');
496
+ badge.className = 'badge-filtro';
497
+ badge.innerHTML = `
498
+ ${item.texto}
499
+ <span class="remove-badge" onclick="removerFiltro('formato_acao', '${item.valor}')">&times;</span>
500
+ `;
501
+ badgesFormato.appendChild(badge);
502
+ });
503
+
504
+ // Atualizar badges de recurso
505
+ const badgesRecurso = document.getElementById('filtros-recurso');
506
+ badgesRecurso.innerHTML = '';
345
507
 
346
- return '{{ page.url }}?' + params.toString();
508
+ respostas.tipo_recurso.forEach(item => {
509
+ const badge = document.createElement('div');
510
+ badge.className = 'badge-filtro';
511
+ badge.innerHTML = `
512
+ ${item.texto}
513
+ <span class="remove-badge" onclick="removerFiltro('tipo_recurso', '${item.valor}')">&times;</span>
514
+ `;
515
+ badgesRecurso.appendChild(badge);
516
+ });
347
517
  }
348
518
 
349
- function atualizarTituloPergunta(numero, texto) {
350
- // Atualiza o título da questão no lado esquerdo
351
- document.querySelector('.step-indicator #currentStep').textContent = numero;
352
- document.querySelector('.question-title').textContent = texto;
519
+ // Função para remover um filtro (chamada pelo X no badge)
520
+ function removerFiltro(tipo, valor) {
521
+ if (tipo === 'perfil_profissional') {
522
+ respostas.perfil_profissional = respostas.perfil_profissional.filter(item => item.valor !== valor);
523
+
524
+ // Desmarcar card correspondente
525
+ const cards = document.querySelectorAll('#pergunta1 .option-card');
526
+ cards.forEach(card => {
527
+ const input = card.querySelector('input');
528
+ if (input && input.value === valor) {
529
+ card.classList.remove('selected');
530
+ input.checked = false;
531
+ }
532
+ });
533
+
534
+ // Verificar se ainda tem algum docente/curador/conteudista selecionado
535
+ const temPerfisFormatados = respostas.perfil_profissional.some(
536
+ item => ['docente', 'curador_conteudo', 'conteudista'].includes(item.valor)
537
+ );
538
+
539
+ if (!temPerfisFormatados) {
540
+ document.getElementById('pergunta2_formato').style.display = 'none';
541
+ respostas.formato_acao = [];
542
+ }
543
+ }
544
+ else if (tipo === 'formato_acao') {
545
+ respostas.formato_acao = respostas.formato_acao.filter(item => item.valor !== valor);
546
+
547
+ // Desmarcar card correspondente
548
+ const cards = document.querySelectorAll('#pergunta2_formato .option-card');
549
+ cards.forEach(card => {
550
+ const input = card.querySelector('input');
551
+ if (input && input.value === valor) {
552
+ card.classList.remove('selected');
553
+ input.checked = false;
554
+ }
555
+ });
556
+ }
557
+ else if (tipo === 'tipo_recurso') {
558
+ respostas.tipo_recurso = respostas.tipo_recurso.filter(item => item.valor !== valor);
559
+
560
+ // Desmarcar card correspondente
561
+ const cards = document.querySelectorAll('#pergunta3_recurso .option-card');
562
+ cards.forEach(card => {
563
+ const input = card.querySelector('input');
564
+ if (input && input.value === valor) {
565
+ card.classList.remove('selected');
566
+ input.checked = false;
567
+ }
568
+ });
569
+ }
570
+
571
+ // Atualizar os badges
572
+ atualizarBadges();
353
573
  }
354
574
 
355
- function responderPergunta1(valor, texto, irParaResultado = false) {
356
- respostas['perfil_profissional'] = {
357
- valor: valor,
358
- texto: texto
575
+ // Função para limpar todas as respostas
576
+ function limparFormulario() {
577
+ // Limpa o objeto de respostas
578
+ respostas = {
579
+ perfil_profissional: [],
580
+ formato_acao: [],
581
+ tipo_recurso: []
359
582
  };
360
583
 
361
- // Desmarca todas as opções
362
- const botoes = document.querySelectorAll('#pergunta1 .option-button');
363
- botoes.forEach(botao => botao.classList.remove('selected'));
584
+ // Remove a classe 'selected' de todos os cards
585
+ document.querySelectorAll('.option-card').forEach(card => {
586
+ card.classList.remove('selected');
587
+ });
364
588
 
365
- // Marca a opção selecionada
366
- event.target.closest('.option-button').classList.add('selected');
589
+ // Desmarca todos os inputs de checkbox
590
+ document.querySelectorAll('input[type="checkbox"]').forEach(input => {
591
+ input.checked = false;
592
+ });
367
593
 
368
- // Habilita o botão de próximo
369
- document.getElementById('nextButton1').disabled = false;
594
+ // Limpa os badges
595
+ document.getElementById('filtros-perfil').innerHTML = '';
596
+ document.getElementById('filtros-formato').innerHTML = '';
597
+ document.getElementById('filtros-recurso').innerHTML = '';
370
598
 
371
- // Configura o botão próximo
372
- document.getElementById('nextButton1').onclick = function() {
373
- if (irParaResultado) {
374
- window.location.href = construirUrlResultado();
375
- } else if (valor === 'docente') {
376
- document.getElementById('pergunta1').style.display = 'none';
377
- document.getElementById('pergunta2b').style.display = 'block';
378
- atualizarTituloPergunta(2, 'Qual formato de ação você trabalha?');
379
- } else {
380
- document.getElementById('pergunta1').style.display = 'none';
381
- document.getElementById('pergunta2a').style.display = 'block';
382
- atualizarTituloPergunta(2, 'Com qual tipo de recurso você trabalha?');
383
- }
384
- };
599
+ // Esconde a pergunta condicional
600
+ document.getElementById('pergunta2_formato').style.display = 'none';
385
601
  }
386
602
 
387
- function responderPergunta2a(valor, texto) {
388
- respostas['tipo_recurso'] = {
389
- valor: valor,
390
- texto: texto
391
- };
603
+ // Função para enviar o formulário
604
+ function enviarFormulario() {
605
+ // Verifica se pelo menos a pergunta 1 foi respondida
606
+ if (respostas.perfil_profissional.length === 0) {
607
+ alert('Por favor, selecione pelo menos um perfil profissional.');
608
+ return;
609
+ }
392
610
 
393
- // Desmarca todas as opções
394
- const botoes = document.querySelectorAll('#pergunta2a .option-button');
395
- botoes.forEach(botao => botao.classList.remove('selected'));
611
+ // Para perfis que exigem formato, verifica se respondeu
612
+ const precisaFormato = respostas.perfil_profissional.some(
613
+ item => ['docente', 'curador_conteudo', 'conteudista'].includes(item.valor)
614
+ );
396
615
 
397
- // Marca a opção selecionada
398
- event.target.closest('.option-button').classList.add('selected');
616
+ if (precisaFormato && respostas.formato_acao.length === 0) {
617
+ alert('Por favor, selecione pelo menos um formato de ação de desenvolvimento.');
618
+ return;
619
+ }
399
620
 
400
- // Habilita o botão de próximo
401
- document.getElementById('nextButton2a').disabled = false;
621
+ // Verifica se respondeu sobre o tipo de recurso
622
+ if (respostas.tipo_recurso.length === 0) {
623
+ alert('Por favor, selecione pelo menos um tipo de recurso.');
624
+ return;
625
+ }
402
626
 
403
- // Configura o botão próximo
404
- document.getElementById('nextButton2a').onclick = function() {
405
- window.location.href = construirUrlResultado();
406
- };
407
- }
408
-
409
- function responderPergunta2b(valor, texto) {
410
- respostas['formato_acao'] = {
411
- valor: valor,
412
- texto: texto
413
- };
627
+ // Constrói a URL para o resultado
628
+ let params = new URLSearchParams();
629
+
630
+ // Adiciona os parâmetros da URL (arrays separados por vírgulas)
631
+ if (respostas.perfil_profissional.length > 0) {
632
+ const valores = respostas.perfil_profissional.map(item => item.valor).join(',');
633
+ const textos = respostas.perfil_profissional.map(item => item.texto).join(', ');
634
+ params.append('perfil', valores);
635
+ params.append('perfil_texto', textos);
636
+ }
414
637
 
415
- // Desmarca todas as opções
416
- const botoes = document.querySelectorAll('#pergunta2b .option-button');
417
- botoes.forEach(botao => botao.classList.remove('selected'));
638
+ if (respostas.formato_acao.length > 0) {
639
+ const valores = respostas.formato_acao.map(item => item.valor).join(',');
640
+ const textos = respostas.formato_acao.map(item => item.texto).join(', ');
641
+ params.append('formato', valores);
642
+ params.append('formato_texto', textos);
643
+ }
418
644
 
419
- // Marca a opção selecionada
420
- event.target.closest('.option-button').classList.add('selected');
645
+ if (respostas.tipo_recurso.length > 0) {
646
+ const valores = respostas.tipo_recurso.map(item => item.valor).join(',');
647
+ const textos = respostas.tipo_recurso.map(item => item.texto).join(', ');
648
+ params.append('recurso', valores);
649
+ params.append('recurso_texto', textos);
650
+ }
421
651
 
422
- // Habilita o botão de próximo
423
- document.getElementById('nextButton2b').disabled = false;
652
+ // Adiciona o parâmetro de resultado
653
+ params.append('resultado', '1');
424
654
 
425
- // Configura o botão próximo
426
- document.getElementById('nextButton2b').onclick = function() {
427
- window.location.href = construirUrlResultado();
428
- };
429
- }
430
-
431
- function voltarPergunta1() {
432
- document.getElementById('pergunta2a').style.display = 'none';
433
- document.getElementById('pergunta2b').style.display = 'none';
434
- document.getElementById('pergunta1').style.display = 'block';
435
- atualizarTituloPergunta(1, 'O que você precisa?');
655
+ // Redireciona para a página de resultados
656
+ window.location.href = '{{ page.url }}?' + params.toString();
436
657
  }
437
658
 
659
+ // Inicialização - esconder a pergunta de formato inicialmente
438
660
  document.addEventListener('DOMContentLoaded', function() {
439
- // Define o total de etapas do quiz
440
- document.querySelector('.step-indicator #totalSteps').textContent = '2';
661
+ document.getElementById('pergunta2_formato').style.display = 'none';
441
662
  });
442
663
  </script>
664
+
665
+ <!-- Adicionar Font Awesome -->
666
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
443
667
  {% endblock %}