Implementando seleção temas (parcial) (537926d8) · Commits · Gaston Morales / MCQ Quiz App · GitLab

index.html

+153 −59

Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html lang="en">

		<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta charset="UTF-8">
		<title>Quiz Perfil Empreendedor</title>
		<!-- Google Font -->
		<link
		href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
		rel="stylesheet"
		/>
		<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" />
		<!-- Stylesheet -->
		<link rel="stylesheet" href="style.css" />
		</head>

		<body>
		<div class="start-screen">
		<div class="header">
		Tela inicial - blá blá blá inicial
		</div>
		<div class="content">

		Introdução
		</div>
		<div class="explicacao">
		<p>Lorem ipsum dolor sit amet. Vel veniam reiciendis sit soluta praesentium aut perferendis aspernatur sed
		voluptas
		expedita et minima magni. Ab tempore dolore eum tempora omnis quo quidem atque eos ratione voluptas et quia
		voluptatem. </p>
		<ol>
		<li>Nam doloribus blanditiis et voluptatem ipsa et optio animi ea dolor ipsa. </li>
		<li>Eos nihil accusantium aut architecto possimus qui minima nemo sit dolores voluptatem. </li>
		</ol>
		<p>Id cumque voluptas in eius officia quo saepe ipsum non aliquid galisum aut dolore tenetur. Ab alias nisi At
		quasi
		vero ex autem adipisci ex internos doloribus sed consequatur dolor et temporibus officia. </p>
		<ul>
		<li>Ut dolor reiciendis et officiis galisum ex labore perspiciatis. </li>
		<li>Qui galisum eius est fugiat fuga aut nisi sunt in rerum totam. </li>
		<li>Est distinctio animi 33 quam tempora aut unde fuga. </li>
		<li>Nam nihil reprehenderit eos velit iure id unde ipsa. </li>
		</ul>
		<p>Et eius velit nam tempora quia quo omnis molestias At soluta debitis in nisi nesciunt ex rerum quos et
		voluptatem
		ipsam. Vel odio quod in alias fugit et voluptatem labore aut ipsum explicabo ea deserunt delectus rem incidunt
		consequuntur. </p>
		<p>Aut perferendis nisi est temporibus assumenda est nobis autem. Id sunt nostrum aut aspernatur repudiandae et
		blanditiis magni sit obcaecati distinctio et repellat dicta cum voluptate reiciendis. Eos obcaecati nisi ut Quis
		omnis et galisum architecto sed adipisci quasi hic repudiandae distinctio. </p>
		</div>
		<button id="start-button">Iniciar</button>
		</div>
		<div class="select-theme-screen">
		<div class="header">
		Tela seleção de temas
		Seleção de temas
		</div>
		<div class="explicacao">
		<p>Selecione a seguir os temas das perguntas que deseja responder:</p>
		<div class="opcoes">
		<label class="opcao">Conhecimento Gerais
		<input type="checkbox" checked="checked">
		<span class="checkmark"></span>
		</label>
		<label class="opcao">Gestão Financeira
		<input type="checkbox">
		<span class="checkmark"></span>
		</label>
		<label class="opcao">Adminstração
		<input type="checkbox">
		<span class="checkmark"></span>
		</label>
		<label class="opcao">Engenharia
		<input type="checkbox">
		<span class="checkmark"></span>
		</label>
		<label class="opcao">Conhecimento Gerais
		<input type="checkbox" checked="checked">
		<span class="checkmark"></span>
		</label>
		<label class="opcao">Gestão Financeira
		<input type="checkbox">
		<span class="checkmark"></span>
		</label>
		<label class="opcao">Adminstração
		<input type="checkbox">
		<span class="checkmark"></span>
		</label>
		<label class="opcao">Engenharia
		<input type="checkbox">
		<span class="checkmark"></span>
		</label>
		<label class="opcao">Conhecimento Gerais
		<input type="checkbox" checked="checked">
		<span class="checkmark"></span>
		</label>
		<label class="opcao">Gestão Financeira
		<input type="checkbox">
		<span class="checkmark"></span>
		</label>
		<label class="opcao">Adminstração
		<input type="checkbox">
		<span class="checkmark"></span>
		</label>
		<label class="opcao">Engenharia
		<input type="checkbox">
		<span class="checkmark"></span>
		</label>
		</div>
		<div class="content">

		</div>
		<button id="select-theme-button">Selecionar</button>
		</div>
		@@ -35,10 +107,31 @@
		<div class="header">
		Tela inicial de tema
		</div>
		<div class="content">

		</div>
		<button id="start-theme-button">Iniciar</button>
		<div class="explicacao">
		<p>Lorem ipsum dolor sit amet. Quo nesciunt perspiciatis <strong>Et quia eos vero optio hic assumenda
		molestiae</strong>! Aut tenetur sint vel minima laudantium <em>Et possimus ea nobis dolorem ab vitae
		dignissimos aut quaerat minus</em> eum ipsa veniam. </p>
		<blockquote cite="https://www.loremipzum.com">Ut inventore praesentium qui impedit explicabo ut aliquid rerum et
		quam perferendis. </blockquote>
		<p>Qui sint sintAut delectus qui nobis quae rem voluptates consequatur. Id natus dolorem <strong>Quo praesentium
		sed
		vitae ipsum ab voluptatibus aperiam</strong> qui excepturi repudiandae a temporibus voluptas. Ut deserunt
		cumque eum rerum voluptatemvel deleniti? Aut iusto esse aut possimus maioresnon suscipit et reprehenderit
		dignissimos. </p>
		<ol>
		<li>Aut molestias consequatur ea minus beatae qui nesciunt neque et consectetur enim. </li>
		<li>Cum similique expedita a placeat nihil. </li>
		</ol>
		<p>Et sequi cumque non iste enimnon ipsam est iste dolores. Sed ipsa expedita et labore possimussed aliquid et
		ipsam
		optio nam dolor quasi. </p>
		<ul>
		<li>Et sint quam id perspiciatis repellendus et quisquam quos! </li>
		<li>Non assumenda omnis ea eius quod ut voluptatem unde. </li>
		<li>Eos fuga error At eaque nesciunt? </li>
		</ul>
		</div>
		<button id="start-theme-button">Iniciar as perguntas</button>
		</div>
		<div id="display-container">
		<div class="header">
		@@ -61,10 +154,11 @@
		<div id="theme-score" class="score-theme-container">
		</div>
		<div id="user-score">Pontuação</div>
		<button id="restart">Reiniciar</button>
		<button id="restart-button">Reiniciar</button>
		</div>
		<!-- Script -->
		<script src="perguntas.js"></script>
		<script src="script.js"></script>
		</body>

		</html>
		No newline at end of file

script.js

+1 −1

Original line number	Diff line number	Diff line
		@@ -15,7 +15,7 @@ let nextBtn = document.getElementById("next-button");
		let countOfQuestion = document.querySelector(".number-of-question");
		let displayContainer = document.getElementById("display-container");
		let scoreContainer = document.querySelector(".score-container");
		let restart = document.getElementById("restart");
		let restart = document.getElementById("restart-button");
		let userScore = document.getElementById("user-score");
		let themeScore = document.getElementById("theme-score");
		let startScreen = document.querySelector(".start-screen");

style.css

+96 −16

Original line number	Diff line number	Diff line
		* {
		padding: 0;
		margin: 0;
		/* padding: 0;
		margin: 0; */
		box-sizing: border-box;
		font-family: "Poppins", sans-serif;
		}

		body {
		background-color: #0a69ed;
		}
		@@ -21,6 +22,18 @@ body {
		top: 50%;
		left: 50%;
		border-radius: 0.6em;
		height: 80%;
		}

		.explicacao {
		height: 80%;
		overflow: auto;
		}

		object {
		width: 100%;
		height: 100%;
		padding: 5px;
		}

		.score-container {
		@@ -42,22 +55,27 @@ body {
		margin: 1.5em 0 1.5em 0;
		padding: 1.0em 0 1.0em 0;
		}

		button {
		border: none;
		outline: none;
		cursor: pointer;
		font-size: 1em;
		margin-top: 1.5em;
		padding: 0.7em 1.8em;
		border-radius: 0.3em;
		}

		#start-button,
		#select-theme-button,
		#start-theme-button,
		#restart {
		font-size: 1.3em;
		padding: 0.5em 1.8em;
		border-radius: 0.2em;
		#next-button{
		background-color: #0a69ed;
		color: #ffffff;
		float: right;
		}

		#restart {
		#restart-button {
		margin-top: 0.9em;
		}

		@@ -115,15 +133,6 @@ button {
		color: #000000;
		cursor: not-allowed;
		}
		#next-button {
		font-size: 1em;
		margin-top: 1.5em;
		background-color: #0a69ed;
		color: #ffffff;
		padding: 0.7em 1.8em;
		border-radius: 0.3em;
		float: right;
		}
		.hide {
		display: none;
		}
		@@ -147,6 +156,77 @@ button {
		margin-bottom: 2em;
		}

		/* theme selection form styling */
		/* Customize the label (opcao) */
		.opcao {
		display: block;
		position: relative;
		padding-left: 35px;
		margin-bottom: 12px;
		cursor: pointer;
		font-size: 1em;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		}

		/* Hide the browser's default checkbox */
		.opcao input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
		}

		/* Create a custom checkbox */
		.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 25px;
		width: 25px;
		background-color: #eee;
		}

		/* On mouse-over, add a grey background color */
		.opcao:hover input ~ .checkmark {
		background-color: #ccc;
		}

		/* When the checkbox is checked, add a blue background */
		.opcao input:checked ~ .checkmark {
		background-color: #0a69ed;
		}

		/* Create the checkmark/indicator (hidden when not checked) */
		.checkmark:after {
		content: "";
		position: absolute;
		display: none;
		}

		/* Show the checkmark when checked */
		.opcao input:checked ~ .checkmark:after {
		display: block;
		}

		/* Style the checkmark/indicator */
		.opcao .checkmark:after {
		left: 9px;
		top: 5px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 3px 3px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		}
		/* ------------------------------------------------------ */


		/* score table styling */
		.tg {
		border-collapse: collapse;