mudanças no layout, tela de fim de tema (parcial) (fc7a6665) · Commits · Gaston Morales / MCQ Quiz App · GitLab

images/bgQuadroFinal.png

0 → 100644

+47.6 KiB

Loading image diff...

images/bgResultadoTema.png

0 → 100644

+102 KiB

Loading image diff...

index.html

+8 −0

Original line number	Diff line number	Diff line
		@@ -58,6 +58,14 @@
		</div>
		<button id="next-button">Próxima</button>
		</div>
		<div class="end-theme-screen">
		<div class="header">
		Resultado
		</div>
		<div class="explicacao">
		</div>
		<button id="end-theme-button">Próximo</button>
		</div>
		<div class="score-container hide">
		<div id="theme-header">Desempenho por Temas</div>
		<div id="theme-score" class="score-theme-container">

script.js

+14 −13

Original line number	Diff line number	Diff line
		// Baseado no tutorial em https://codingartistweb.com/2022/06/quiz-app-with-javascript/ acessado em 02/08/2023
		// Baseado no tutorial em https://codingartistweb.com/2022/06/quiz-app-with-javascript/ acessado em displayContainer02/08/2023
		// Adaptado para pt-BR e acrescentadas funcionalidades adicionais por Gastón Morales@Faros Educacional
		//

		// Configurações
		const time4Question = 0 // tempo em segundos (+1) para cada pergunta ser respondida, se 0 (zero) não tem tempo
		const porTemas = true // perguntas apresentadas agrupadas por tema (true) ou não (false)
		const time4Question = 0; // tempo em segundos (+1) para cada pergunta ser respondida, se 0 (zero) não tem tempo
		const porTemas = true; // perguntas apresentadas agrupadas por tema (true) ou não (false)
		const mostraQuadroFinal = true; // mostra (ou não) a tela final com a tabela de resultados

		//References
		let timerOnIcon = document.getElementById("timer-on-icon");
		@@ -31,6 +32,10 @@ let startThemeScreen = document.querySelector(".start-theme-screen");
		let startThemeHeader = document.querySelector(".start-theme-screen .header");
		let startThemeContent = document.querySelector(".start-theme-screen .explicacao");
		let startThemeButton = document.getElementById("start-theme-button");
		let endThemeScreen = document.querySelector(".end-theme-screen");
		let endThemeHeader = document.querySelector(".end-theme-screen .header");
		let endThemeContent = document.querySelector(".end-theme-screen .explicacao");
		let endThemeButton = document.getElementById("end-theme-button");
		let opcoesHTML = document.querySelector(".opcoes");
		let questionCount =0;
		let numberOfQuestionsShowed = 0;
		@@ -58,6 +63,7 @@ nextBtn.addEventListener(
		if ( (porTemas ? themeCount == (selectedThemes.length - 1) : true) && questionCount == quizArray.length) {
		//hide question container and display score
		displayContainer.classList.add("hide");
		bodyContainer.classList.value = 'bgFinalResult';
		scoreContainer.classList.remove("hide");
		//user score
		userScore.innerHTML =
		@@ -101,12 +107,14 @@ nextBtn.addEventListener(
		table += "</tbody>\r\n</table>\r\n";
		themeScore.innerHTML = table;
		} else {
		// Vamos para o próximo Tema
		if ( questionCount == quizArray.length) {
		themeCount += 1;
		displayContainer.classList.add("hide");
		themeDisplay(themeCount);
		}
		else {
		// Vamos para próxima pergunta
		//display questionCount
		countOfQuestion.innerHTML =
		questionCount + 1 + " de " + quizArray.length + " perguntas";
		@@ -268,6 +276,8 @@ function themeListCreator() {
		function runQuiz() {
		quizContainer.innerHTML = "";
		questionCount = 0;
		bodyContainer.classList.value = 'bgQuiz';
		displayContainer.classList.remove("hide");
		quizCreator();
		quizDisplay(questionCount);
		}
		@@ -275,7 +285,6 @@ function runQuiz() {
		// Processes que select theme screen
		startThemeButton.addEventListener("click", () => {
		startThemeScreen.classList.add("hide");
		displayContainer.classList.remove("hide");
		runQuiz();
		});

		@@ -345,20 +354,11 @@ function initial() {

		});

		// Se for "por Tema", apresenta a tela de seleção de temas
		// para cada tema selecionado, mostra tela introdutória do tema
		// , filtra as questões do banco buscando as questões do tema colocando em quizArray
		// , limpa quizContainer e zera questionCount
		// , chama quizCreator e quizDisplay
		// Se não for "por Tema"... segue como está
		//

		if ( porTemas ) {
		// mostra tela seleção de temas e
		selThemeScreen.classList.remove("hide");
		}
		else {
		displayContainer.classList.remove("hide");
		runQuiz();
		}
		}
		@@ -385,6 +385,7 @@ function startQuiz() {
		displayContainer.classList.add("hide");
		selThemeScreen.classList.add("hide");
		startThemeScreen.classList.add("hide");
		endThemeScreen.classList.add("hide");
		scoreContainer.classList.add("hide");
		}

style.css

+24 −7

Original line number	Diff line number	Diff line
		@@ -21,10 +21,23 @@ body {
		background-image: url(images/bgIntro.png);
		}

		.bgQuiz {
		background-image: url(images/bgQuiz.png);
		}

		.bgThemeResult {
		background-image: url(images/bgResultadoTema.png);
		}

		.bgFinalResult {
		background-image: url(images/bgQuadroFinal.png);
		}

		/* .start-screen, */
		.intro-screen,
		.select-theme-screen,
		.start-theme-screen {
		.start-theme-screen,
		.end-theme-screen {
		background-color: #ffffff;
		padding: 3.1em 1.8em;
		width: 80%;
		@@ -46,6 +59,13 @@ body {
		font-weight: 600;
		}

		.end-theme-screen .header {
		color:#ffffff;
		font-size: 4em;
		font-weight: 600;
		text-align: center;
		}

		.explicacao {
		height: 80%;
		overflow: auto;
		@@ -88,24 +108,21 @@ button {
		font-size: 1em;
		margin-top: 1.5em;
		padding: 0.7em 1.8em;
		border-radius: 0.3em;
		border: #ffffff 1px solid;
		border-radius: 1em;
		}

		#start-button,
		#intro-button,
		#select-theme-button,
		#start-theme-button,
		#end-theme-button,
		#next-button{
		background-color: #0454A1;
		color: #ffffff;
		float: right;
		}

		#next-button {
		border: #ffffff 1px solid;
		border-radius: 1em;
		}

		#start-button {
		position: absolute;
		transform: translate(-50%, -50%);