Skip to content

M
MCQ Quiz App
Commit 537926d8 authored by Gaston Morales's avatar Gaston Morales
Browse files
Options

Implementando seleção temas (parcial)

parent 978c58e1
Hide whitespace changes
Inline Side-by-side
Showing with 250 additions and 76 deletions
index.html
View file @ 537926d8
<!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"
/>
<!-- 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">
</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">
<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" />
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
</div>
<button id="select-theme-button">Selecionar</button>
<body>
<div class="start-screen">
<div class="header">
Introdução
</div>
<div class="start-theme-screen">
<div class="header">
Tela inicial de tema
</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>
<button id="start-button">Iniciar</button>
</div>
<div class="select-theme-screen">
<div class="header">
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>
<button id="start-theme-button">Iniciar</button>
</div>
<div id="display-container">
<div class="header">
<div class="number-of-count">
<span class="number-of-question">1 de 3 perguntas</span>
</div>
<div class="timer-div">
<img id="timer-on-icon" src="timer-icon.svg" />
<img id="timer-off-icon" class="hide" src="timer-off-icon.svg" />
<span class="time-left">15s</span>
</div>
<button id="select-theme-button">Selecionar</button>
</div>
<div class="start-theme-screen">
<div class="header">
Tela inicial de tema
</div>
<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">
<div class="number-of-count">
<span class="number-of-question">1 de 3 perguntas</span>
</div>
<div id="container">
<!-- questions and options will be displayed here -->
<div class="timer-div">
<img id="timer-on-icon" src="timer-icon.svg" />
<img id="timer-off-icon" class="hide" src="timer-off-icon.svg" />
<span class="time-left">15s</span>
</div>
<button id="next-button">Próxima</button>
</div>
<div class="score-container hide">
<div id="theme-header">Desempenho por Temas</div>
<div id="theme-score" class="score-theme-container">
</div>
<div id="user-score">Pontuação</div>
<button id="restart">Reiniciar</button>
<div id="container">
<!-- questions and options will be displayed here -->
</div>
<button id="next-button">Próxima</button>
</div>
<div class="score-container hide">
<div id="theme-header">Desempenho por Temas</div>
<div id="theme-score" class="score-theme-container">
</div>
<!-- Script -->
<script src="perguntas.js"></script>
<script src="script.js"></script>
</body>
</html>
<div id="user-score">Pontuação</div>
<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
View file @ 537926d8
......@@ -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
View file @ 537926d8
* {
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;
......
Markdown is supported
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