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

index.html

+153 −59

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

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

	<body>		<body>
	<div class="start-screen">		<div class="start-screen">
	<div class="header">		<div class="header">
	Tela inicial - blá blá blá inicial		Introdução
	</div>		</div>
	<div class="content">		<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>		</div>
	<button id="start-button">Iniciar</button>		<button id="start-button">Iniciar</button>
	</div>		</div>
	<div class="select-theme-screen">		<div class="select-theme-screen">
	<div class="header">		<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>
	<div class="content">

	</div>		</div>
	<button id="select-theme-button">Selecionar</button>		<button id="select-theme-button">Selecionar</button>
	</div>		</div>
	@@ -35,10 +107,31 @@
	<div class="header">		<div class="header">
	Tela inicial de tema		Tela inicial de tema
	</div>		</div>
	<div class="content">		<div class="explicacao">
			<p>Lorem ipsum dolor sit amet. Quo nesciunt perspiciatis <strong>Et quia eos vero optio hic assumenda
	</div>		molestiae</strong>! Aut tenetur sint vel minima laudantium <em>Et possimus ea nobis dolorem ab vitae
	<button id="start-theme-button">Iniciar</button>		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>
	<div id="display-container">		<div id="display-container">
	<div class="header">		<div class="header">
	@@ -61,10 +154,11 @@
	<div id="theme-score" class="score-theme-container">		<div id="theme-score" class="score-theme-container">
	</div>		</div>
	<div id="user-score">Pontuação</div>		<div id="user-score">Pontuação</div>
	<button id="restart">Reiniciar</button>		<button id="restart-button">Reiniciar</button>
	</div>		</div>
	<!-- Script -->		<!-- Script -->
	<script src="perguntas.js"></script>		<script src="perguntas.js"></script>
	<script src="script.js"></script>		<script src="script.js"></script>
	</body>		</body>

	</html>		</html>
			No newline at end of file

script.js

+1 −1

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

style.css

+96 −16

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

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

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

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

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

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

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

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

	@@ -115,15 +133,6 @@ button {
	color: #000000;		color: #000000;
	cursor: not-allowed;		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 {		.hide {
	display: none;		display: none;
	}		}
	@@ -147,6 +156,77 @@ button {
	margin-bottom: 2em;		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 */		/* score table styling */
	.tg {		.tg {
	border-collapse: collapse;		border-collapse: collapse;