Skip to content
GitLab
Commit 208e9099 authored by Danilo Blum's avatar Danilo Blum
Browse files

Modulo 1 Inserir exercicio de fixacao

parent 855b9666
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 1358 additions and 3 deletions
+1358 -3
css/colors.css
+ 20
- 0
View file @ 208e9099
......@@ -16,4 +16,24 @@
--color-dark: #1e1e1e;
--color-light: #eef2f6;
--color-light-hover: #e6e6e625;
/* Exercício de Fixação */
--exercise-divider-line: var(--secondary-color-light);
--exercise-option-default: var(--color-light);
--exercise-option-hover: var(--primary-color);
--exercise-option-selected-background: var(--primary-color-extra-light);
--exercise-option-selected-text: var(--primary-color-dark);
--exercise-option-blocked: var(--text-color-light);
--exercise-option-right-stroke: var(--color-light);
--exercise-option-right-background: var(--color-light);
--exercise-option-right-feedback-text: var(--color-light);
--exercise-option-wrong-stroke: var(--color-light);
--exercise-option-wrong-background: var(--color-light);
--exercise-option-wrong-feedback-text: var(--color-light);
}
css/exercise.css 0 → 100644
+ 116
- 0
View file @ 208e9099
.mcq-card {
padding: 0px 30px;
}
.mcq-card .mcq__question {
padding: 30px 0;
border-bottom: 1px solid var(--exercise-divider-line);
font-family: 'Roboto Condensed Bold', sans-serif;
font-size: 1.25rem;
}
/* Answers List */
.mcq-card .mcq__answers {
padding: 30px 0;
}
.mcq-card .mcq__answers ul {
list-style-type: none;
margin: 0;
}
.mcq-card .mcq__answers ul li {
padding: 10px 20px;
margin-bottom: 20px;
border: 2px solid var(--exercise-option-default);
background-color: var(--exercise-option-default);
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
transition: 0.1s;
}
.mcq-card .mcq__answers ul li:last-child {
margin-bottom: 0;
}
.mcq-card .mcq__answers ul li:not(.mcq__answers--blocked, .mcq__answers--selected, .mcq__answers--correct, .mcq__answers--incorrect):hover {
border-color: var(--exercise-option-hover);
/* background-color: var(--color-light-hover); */
}
.mcq-card .mcq__answers ul li.mcq__answers--selected {
background-color: var(--exercise-option-selected-background);
border-color: var(--exercise-option-hover);
color: var(--exercise-option-selected-text);
}
.mcq-card .mcq__answers ul li.mcq__answers--correct {
background-color: #c0ffce;
border-color: #28a745;
color: #014811;
cursor: not-allowed;
}
.mcq-card .mcq__answers ul li.mcq__answers--incorrect {
background-color: #ffc5cb;
border-color: #dc3545;
color: #81000c;
cursor: not-allowed;
}
.mcq-card .mcq__answers ul li.mcq__answers--blocked:not(.mcq__answers--correct, .mcq__answers--incorrect) {
cursor: not-allowed;
border-color: var(--exercise-option-default);
color: var(--exercise-option-blocked);
}
/* Submit Button */
.mcq-card .mcq__submit {
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
padding: 30px 0;
border-top: 1px solid var(--exercise-divider-line);
}
.mcq-card .mcq__submit button {
overflow-wrap: normal;
align-self: end;
}
.mcq-card .mcq__submit button[aria-disabled='true'] {
background-color: #909599;
border-color: #909599;
cursor: not-allowed;
}
/* Feedback mensage */
.mcq-card .mcq__submit .mcq__submit--feedback {
font-family: 'Roboto Condensed', sans-serif;
margin-bottom: 30px;
line-height: 1.2;
}
.mcq-card .mcq__submit .mcq__submit--feedback .material-symbols-rounded {
font-weight: 700;
margin-right: 10px;
}
.mcq-card .mcq__submit .mcq__submit--feedback .feedback__content {
vertical-align: top;
display: block;
font-size: 1.2rem;
font-family: 'Roboto Condensed', sans-serif;
margin-top: 10px;
}
.mcq-card .mcq__submit .mcq__submit--feedback.mcq__submit__feedback--correct {
display: block !important;
color: #28a745;
}
.mcq-card .mcq__submit .mcq__submit--feedback.mcq__submit__feedback--incorrect {
display: block !important;
color: #dc3545;
}
/* Answer Feedback (correct answers) */
.mcq-card .mcq__answer--feedback {
padding-bottom: 30px;
}
.mcq-card .mcq__answer--feedback p {
color: var(--text-color-light);
font-size: 1.1rem;
}
@media (min-width: 768px) {
}
css/style.css
+ 1
- 1
View file @ 208e9099
......@@ -5,6 +5,7 @@
@import 'fonts.css';
@import 'buttons.css';
@import 'recursos-visuais.css';
@import 'exercise.css';
* {
margin: 0;
......@@ -92,7 +93,6 @@ strong {
font-weight: 700;
}
.figure-caption {
font-size: 75%;
color: #6c757d;
......
js/exercise.js 0 → 100644
+ 120
- 0
View file @ 208e9099
let mcqCard = document.querySelectorAll('.mcq-card');
(function () {
mcqCard.forEach(mcq => {
let answerOption = mcq.querySelectorAll('.mcq__answers li');
let submitButton = mcq.querySelector('.mcq__submit button');
let submitFeedback = mcq.querySelector('.mcq__submit--feedback');
let submitAnswerFeedback = mcq.querySelector('.mcq__answer--feedback');
// let feedbackText = answerOption.getAttribute('data-feedback');
let score = 0;
// Select option, clear the others and enable submit
answerOption.forEach(option => {
option.addEventListener('click', function () {
answerSelect(option);
});
});
//Submit button to check only selected class option.
submitButton.addEventListener('click', function () {
if (submitButton.getAttribute('type') === 'submit' && submitButton.getAttribute('aria-disabled') === 'false') {
butttonCheck();
} else {
buttonReset();
}
});
function answerSelect(e) {
if (submitButton.getAttribute('type') === 'submit') {
for (let i = 0; i < answerOption.length; i++) {
const element = answerOption[i];
element.classList.remove('mcq__answers--selected');
}
e.classList.add('mcq__answers--selected');
submitButton.setAttribute('aria-disabled', 'false');
}
}
function incorrectAnswer(event) {
feedbackText = event.getAttribute('data-feedback');
event.classList.remove('mcq__answers--selected');
event.classList.add('mcq__answers--incorrect');
submitFeedback.innerHTML = `<span class="material-symbols-rounded">cancel</span> <strong>Resposta errada!</strong><br><span class="feedback__content">` + feedbackText + `</span>`;
submitFeedback.classList.remove('d-none', 'mcq__submit__feedback--correct');
submitFeedback.classList.add('mcq__submit__feedback--incorrect');
}
function correctAnswer(event) {
feedbackText = event.getAttribute('data-feedback');
event.classList.remove('mcq__answers--selected');
event.classList.add('mcq__answers--correct');
submitFeedback.innerHTML = `<span class="material-symbols-rounded">check_circle</span> <strong>Resposta correta!</strong><br><span class="feedback__content">` + feedbackText + `</span>`;
submitFeedback.classList.remove('d-none', 'mcq__submit__feedback--incorrect');
submitFeedback.classList.add('mcq__submit__feedback--correct');
if (submitAnswerFeedback) {
submitAnswerFeedback.classList.remove('d-none');
}
}
function blockAnswerOption() {
for (let i = 0; i < answerOption.length; i++) {
const element = answerOption[i];
element.classList.add('mcq__answers--blocked');
}
}
function butttonCheck() {
if (submitButton.getAttribute('type') === 'submit') {
score++;
for (let i = 0; i < answerOption.length; i++) {
const element = answerOption[i];
if (element.classList.contains('mcq__answers--selected')) {
if (!element.hasAttribute('correct')) {
console.log('errou');
incorrectAnswer(element);
blockAnswerOption();
} else {
console.log('acertou');
correctAnswer(element);
blockAnswerOption();
}
}
}
submitButton.setAttribute('type', 'reset');
submitButton.innerHTML = 'Recomeçar';
}
}
function buttonReset() {
if (submitButton.getAttribute('type') === 'reset') {
for (let i = 0; i < answerOption.length; i++) {
const element = answerOption[i];
element.classList.remove('mcq__answers--correct', 'mcq__answers--incorrect', 'mcq__answers--blocked', 'mcq__answers--selected');
submitButton.setAttribute('type', 'submit');
submitButton.innerHTML = 'Conferir';
submitButton.setAttribute('aria-disabled', 'true');
}
if (submitFeedback.classList.contains('mcq__submit__feedback--correct')) {
score = 0;
}
submitFeedback.classList.remove('mcq__submit__feedback--correct', 'mcq__submit__feedback--incorrect');
submitFeedback.classList.add('d-none');
if (submitAnswerFeedback) {
submitAnswerFeedback.classList.add('d-none');
}
}
}
});
})();
modulo1/aula1/topico1.html
+ 2
- 0
View file @ 208e9099
......@@ -82,6 +82,8 @@
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>A luta pela democratização da saúde</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Resumo da aula</a>
<a href="topico8.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status=""></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......
modulo1/aula1/topico2.html
+ 2
- 0
View file @ 208e9099
......@@ -76,6 +76,8 @@
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>A luta pela democratização da saúde</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Resumo da aula</a>
<a href="topico8.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status=""></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......
modulo1/aula1/topico3.html
+ 2
- 0
View file @ 208e9099
......@@ -76,6 +76,8 @@
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>A luta pela democratização da saúde</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Resumo da aula</a>
<a href="topico8.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status=""></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......
modulo1/aula1/topico4.html
+ 2
- 0
View file @ 208e9099
......@@ -76,6 +76,8 @@
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>A luta pela democratização da saúde</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Resumo da aula</a>
<a href="topico8.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status=""></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......
modulo1/aula1/topico5.html
+ 2
- 0
View file @ 208e9099
......@@ -76,6 +76,8 @@
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>A luta pela democratização da saúde</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Resumo da aula</a>
<a href="topico8.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status=""></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......
modulo1/aula1/topico6.html
+ 2
- 0
View file @ 208e9099
......@@ -76,6 +76,8 @@
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status="selected"></span>A luta pela democratização da saúde</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Resumo da aula</a>
<a href="topico8.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status=""></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......
modulo1/aula1/topico7.html
+ 3
- 1
View file @ 208e9099
......@@ -76,6 +76,8 @@
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico concluído" status="completed"></span>A luta pela democratização da saúde</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status="selected"></span>Resumo da aula</a>
<a href="topico8.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status=""></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......@@ -171,7 +173,7 @@
<div class="col-12 col-md-10 col-lg-8">
<div class="page-nav d-flex justify-content-around">
<a class="button-primary mb-5 mb-md-0" href="topico6.html" rel="prev">Tópico anterior</a>
<a class="button-primary" href="../aula2/topico1.html" rel="next">Aula 2</a>
<a class="button-primary" href="topico8.html" rel="next">Próximo tópico</a>
</div>
</div>
</div>
......
modulo1/aula1/topico8.html 0 → 100644
+ 537
- 0
View file @ 208e9099
This diff is collapsed.
modulo1/aula2/topico1.html
+ 2
- 0
View file @ 208e9099
......@@ -80,6 +80,8 @@
<a href="topico5.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Redes de atenção à saúde e saúde da família</a>
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Resumo da aula</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......
modulo1/aula2/topico2.html
+ 2
- 0
View file @ 208e9099
......@@ -74,6 +74,8 @@
<a href="topico5.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Redes de atenção à saúde e saúde da família</a>
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Resumo da aula</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status=""></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......
modulo1/aula2/topico3.html
+ 2
- 0
View file @ 208e9099
......@@ -74,6 +74,8 @@
<a href="topico5.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Redes de atenção à saúde e saúde da família</a>
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Resumo da aula</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status=""></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......
modulo1/aula2/topico4.html
+ 2
- 0
View file @ 208e9099
......@@ -75,6 +75,8 @@
<a href="topico5.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Redes de atenção à saúde e saúde da família</a>
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Resumo da aula</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status=""></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......
modulo1/aula2/topico5.html
+ 2
- 0
View file @ 208e9099
......@@ -74,6 +74,8 @@
<a href="topico5.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status="selected"></span>Redes de atenção à saúde e saúde da família</a>
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Resumo da aula</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status=""></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......
modulo1/aula2/topico6.html
+ 3
- 1
View file @ 208e9099
......@@ -74,6 +74,8 @@
<a href="topico5.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico concluído" status="completed"></span>Redes de atenção à saúde e saúde da família</a>
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status="selected"></span>Resumo da aula</a>
<a href="topico7.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído" status=></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......@@ -169,7 +171,7 @@
<div class="col-12 col-md-10 col-lg-8">
<div class="page-nav d-flex justify-content-around">
<a class="button-primary mb-5 mb-md-0" href="topico5.html" rel="prev">Tópico anterior</a>
<a class="button-primary" href="../aula3/topico1.html" rel="next">Aula 3</a>
<a class="button-primary" href="topico7.html" rel="next">Próximo tópico</a>
</div>
</div>
</div>
......
modulo1/aula2/topico7.html 0 → 100644
+ 534
- 0
View file @ 208e9099
This diff is collapsed.
modulo1/aula3/topico1.html
+ 2
- 0
View file @ 208e9099
......@@ -78,6 +78,8 @@
<a href="topico4.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Os Desafios do SUS para a garantia do direito à saúde</a>
<a href="topico5.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Resumo da aula</a>
<a href="topico6.html" tabindex="0" role="link" class="sidebar__btn sidebar__list-item"><span class="material-symbols-rounded" aria-label="Tópico não concluído"></span>Exercício de fixação</a>
</div>
</nav>
<hr />
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment