Implementa seleção de temas (parcial) (978c58e1) · Commits · Gaston Morales / MCQ Quiz App · GitLab

index.html

+24 −3

Original line number	Diff line number	Diff line
		@@ -14,11 +14,32 @@
		</head>
		<body>
		<div class="start-screen">
		<h4>
		<div class="header">
		Tela inicial - blá blá blá inicial
		</h4>
		</div>
		<div class="content">

		</div>
		<button id="start-button">Iniciar</button>
		</div>
		<div class="select-theme-screen">
		<div class="header">
		Tela seleção de temas
		</div>
		<div class="content">

		</div>
		<button id="select-theme-button">Selecionar</button>
		</div>
		<div class="start-theme-screen">
		<div class="header">
		Tela inicial de tema
		</div>
		<div class="content">

		</div>
		<button id="start-theme-button">Iniciar</button>
		</div>
		<div id="display-container">
		<div class="header">
		<div class="number-of-count">

perguntas.js

+2 −2

Original line number	Diff line number	Diff line
		@@ -30,7 +30,7 @@
		// maxScore: 2, // número máximo de pontos que podem ser obtidos ao responder a pergunta
		//

		const quizArray = [
		const quizDataBase = [
		{
		id: "01.01",
		type: "noAnswer",
		@@ -93,7 +93,7 @@ const quizArray = [
		}
		];

		const quizArrayBASE = [
		const quizDataBaseComplete = [
		{
		id: "01.01",
		type: "noAnswer",

script.js

+74 −13

Original line number	Diff line number	Diff line
		@@ -4,7 +4,7 @@

		// Configurações
		const time4Question = 0 // tempo em segundos (+1) para cada pergunta ser respondida, se 0 (zero) não tem tempo
		const porTemas = false // perguntas apresentadas agrupadas por tema (true) ou não (false)
		const porTemas = true // perguntas apresentadas agrupadas por tema (true) ou não (false)

		//References
		let timerOnIcon = document.getElementById("timer-on-icon");
		@@ -20,17 +20,22 @@ let userScore = document.getElementById("user-score");
		let themeScore = document.getElementById("theme-score");
		let startScreen = document.querySelector(".start-screen");
		let startButton = document.getElementById("start-button");
		let selThemeScreen = document.querySelector(".select-theme-screen");
		let selThemeButton = document.getElementById("select-theme-button");
		let startThemeScreen = document.querySelector(".start-theme-screen");
		let startThemeButton = document.getElementById("start-theme-button");
		let questionCount;
		let themeCount;
		let scoreCount = 0;
		let count = time4Question;
		let countdown;
		let selectedThemes = [];
		let themeList = [];
		let quizArray = [];

		//Restart Quiz
		restart.addEventListener("click", () => {
		initial();
		displayContainer.classList.remove("hide");
		scoreContainer.classList.add("hide");
		startQuiz();
		});

		//Next Button
		@@ -186,7 +191,9 @@ function checker(userOption) {
		themeList[quizArray[questionCount].themeIndex].maxScoreTheme += quizArray[questionCount].maxScore;

		//clear interval(stop timer)
		if ( time4Question > 0 ) {
		clearInterval(countdown);
		}
		//disable all options
		options.forEach((element) => {
		element.disabled = true;
		@@ -220,11 +227,38 @@ function themeListCreator() {
		});
		}

		//initial setup
		function initial() {
		function runQuiz() {
		quizContainer.innerHTML = "";
		questionCount = 0;
		scoreCount = 0;
		quizCreator();
		quizDisplay(questionCount);
		}

		// Processes que select theme screen
		startThemeButton.addEventListener("click", () => {
		startThemeScreen.classList.add("hide");
		displayContainer.classList.remove("hide");
		runQuiz();
		});

		// Shows theme start screen
		function themeDisplay(themeCount) {
		// Carrega o html do tema para a tela
		// questionCount = 0
		// Filtra o quizArray para as perguntas do tema
		// Mostra a tela do tema
		startThemeScreen.classList.remove("hide");
		}

		// Processes que select theme screen
		selThemeButton.addEventListener("click", () => {
		selThemeScreen.classList.add("hide");
		themeCount = 0;
		themeDisplay(themeCount)
		});

		//initial setup
		function initial() {
		// if time to answer question is enabled
		if ( time4Question > 0 ) {
		count = time4Question;
		@@ -239,21 +273,48 @@ function initial() {
		timeLeft.classList.add("hide");
		timerOffIcon.classList.remove("hide");
		}

		scoreCount = 0;
		// Renomear no nome do array quizArray do perguntas.js para quizDataBase -- ele continua CONST
		quizArray = quizDataBase;

		// Cria a lista de temas (completa)
		themeList = [];
		themeListCreator();
		quizCreator();
		quizDisplay(questionCount);

		// 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();
		}
		}

		//when user click on start button
		startButton.addEventListener("click", () => {
		startScreen.classList.add("hide");
		displayContainer.classList.remove("hide");
		initial();
		});

		//hide quiz and display start screen
		window.onload = () => {
		function startQuiz() {
		startScreen.classList.remove("hide");
		displayContainer.classList.add("hide");
		selThemeScreen.classList.add("hide");
		startThemeScreen.classList.add("hide");
		scoreContainer.classList.add("hide");
		}

		//hide quiz and display start screen
		window.onload = () => {
		startQuiz();
		};

style.css

+20 −0

Original line number	Diff line number	Diff line
		@@ -7,7 +7,22 @@
		body {
		background-color: #0a69ed;
		}

		.start-screen,
		.select-theme-screen,
		.start-theme-screen {
		background-color: #ffffff;
		padding: 3.1em 1.8em;
		width: 80%;
		max-width: 37.5em;
		margin: 0 auto;
		position: absolute;
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;
		border-radius: 0.6em;
		}

		.score-container {
		position: absolute;
		top: 0;
		@@ -32,15 +47,20 @@ button {
		outline: none;
		cursor: pointer;
		}

		#start-button,
		#select-theme-button,
		#start-theme-button,
		#restart {
		font-size: 1.3em;
		padding: 0.5em 1.8em;
		border-radius: 0.2em;
		}

		#restart {
		margin-top: 0.9em;
		}

		#display-container {
		background-color: #ffffff;
		padding: 3.1em 1.8em;