style the quiz a little again
This commit is contained in:
ajuvercr
parent
bf6e6c7226
commit
6994c9499f
6 changed files with 93 additions and 107 deletions
|
|
@ -2,4 +2,5 @@
|
|||
naam: Quiz
|
||||
navigable: true
|
||||
order: 4
|
||||
head: <link rel="stylesheet" href="/stylesheets/quiz.css">
|
||||
---
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -41,23 +41,54 @@ main {
|
|||
padding: 2rem 2rem 0 2rem;
|
||||
}
|
||||
|
||||
.main_content {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.beforeTheFold {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.quizSpotlight {
|
||||
margin-top: 2rem;
|
||||
font-size: 2rem;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.quizSpotlight:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.quizSpotlight a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
background: var(--white);
|
||||
color: var(--darkblue);
|
||||
border: 0.4rem solid var(--darkblue);
|
||||
padding: 1rem 2rem;
|
||||
margin-right: 3rem;
|
||||
}
|
||||
.quizSpotlight a:hover {
|
||||
background-color: var(--lightblue);
|
||||
border: 0.4rem solid var(--lightblue);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
details {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
summary {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
details[open] {
|
||||
border-bottom: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
.align {
|
||||
|
|
@ -111,7 +142,8 @@ details[open] {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
.nav-link:hover, .active_link {
|
||||
.nav-link:hover,
|
||||
.active_link {
|
||||
background: var(--yellow);
|
||||
color: var(--lightblue);
|
||||
}
|
||||
|
|
@ -146,43 +178,43 @@ details[open] {
|
|||
}
|
||||
|
||||
.randomVerenigingen p:nth-child(odd) {
|
||||
-webkit-text-stroke-width: 2px;
|
||||
-webkit-text-stroke-color: var(--lightblue);
|
||||
color: transparent;
|
||||
-webkit-text-stroke-width: 2px;
|
||||
-webkit-text-stroke-color: var(--lightblue);
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.randomVerenigingen p {
|
||||
text-transform: uppercase;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.randomVereniging{
|
||||
border: 2px solid var(--yellow);
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
.randomVereniging {
|
||||
border: 2px solid var(--yellow);
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.randomVerenigingWrapper{
|
||||
min-width: 20rem;
|
||||
flex: 1;
|
||||
.randomVerenigingWrapper {
|
||||
min-width: 20rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.randomVerenigingenWrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.randomVerenigingWrapper:nth-child(1){
|
||||
padding-top: 4rem;
|
||||
.randomVerenigingWrapper:nth-child(1) {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
.randomVerenigingWrapper:nth-child(2){
|
||||
padding-top: 2rem;
|
||||
.randomVerenigingWrapper:nth-child(2) {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.randomVereniging_imageWrapper{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 1rem;
|
||||
.randomVereniging_imageWrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Small screens */
|
||||
|
|
@ -277,9 +309,11 @@ input {
|
|||
color: inherit;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0.15em solid var(--darkblue);
|
||||
}
|
||||
|
||||
input {
|
||||
border: none;
|
||||
border-bottom: 0.15em solid var(--darkblue);
|
||||
|
|
@ -335,28 +369,6 @@ h2 {
|
|||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.quizSpotlight {
|
||||
margin-top: 2rem;
|
||||
font-size: 2rem;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.quizSpotlight a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
background: var(--white);
|
||||
color: var(--darkblue);
|
||||
border: 0.4rem solid var(--darkblue);
|
||||
padding: 1rem 2rem;
|
||||
margin-right: 3rem;
|
||||
}
|
||||
.quizSpotlight a:hover {
|
||||
background-color: var(--lightblue);
|
||||
border: 0.4rem solid var(--lightblue);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.scroll {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -417,47 +429,8 @@ h2 {
|
|||
box-shadow: inset 0 -0.15em 0 var(--yellow);
|
||||
}
|
||||
|
||||
#postcodeField {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#postcodeField::-webkit-outer-spin-button,
|
||||
#postcodeField::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
#postcodeField[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
max-height: 60vh;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
||||
overflow-y: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
fieldset p label {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
fieldset p {
|
||||
margin: 15px 10px;
|
||||
}
|
||||
|
||||
fieldset p label input {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.home_link .active_link {
|
||||
box-shadow: inset 0 -0.1rem 0 var(--darkblue);
|
||||
}
|
||||
|
||||
.link {
|
||||
|
|
@ -581,7 +554,8 @@ fieldset p label input {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.tile__image img, .tile__image svg {
|
||||
.tile__image img,
|
||||
.tile__image svg {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -631,8 +605,10 @@ fieldset p label input {
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.randomVerenigingWrapper:nth-child(1), .randomVerenigingWrapper:nth-child(2){ /* Dit heeft hogere prioriteit dan elk kind. */
|
||||
padding-top: 0;
|
||||
.randomVerenigingWrapper:nth-child(1),
|
||||
.randomVerenigingWrapper:nth-child(2) {
|
||||
/* Dit heeft hogere prioriteit dan elk kind. */
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -82,7 +82,19 @@ h3::first-letter {
|
|||
}
|
||||
|
||||
.buttons {
|
||||
<<<<<<< HEAD
|
||||
padding: 10px;
|
||||
=======
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
width: 70%;
|
||||
margin: 20px auto;
|
||||
>>>>>>> 85fe081... style the quiz a little again
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<%= render '/partials/navbar.*' %>
|
||||
|
||||
<main>
|
||||
<%= yield %>
|
||||
<div class="main_content">
|
||||
<%= yield %>
|
||||
</div>
|
||||
<footer class="align">
|
||||
<div>
|
||||
<img src="" alt="">
|
||||
|
|
|
|||
|
|
@ -5,18 +5,16 @@
|
|||
</p>
|
||||
<input id="postcodeField" type=number placeholder=9000>
|
||||
<%else%>
|
||||
<form id="<%= number %>_form">
|
||||
<fieldset>
|
||||
<form id="<%= number %>_form" class="form">
|
||||
<% question[:antwoorden].sort_by{ |x| x[:tekst] }.each_with_index do |answer, idx| %>
|
||||
<p>
|
||||
<label>
|
||||
<label class="form__element">
|
||||
<input type=<% if question[:type] == "meerkeuze" %>"checkbox"<% else %>"radio"<% end %>
|
||||
value='<%=number+"#"+idx.to_s%>' name=<%= number %> >
|
||||
<%= answer[:tekst] %>
|
||||
<span class="form__element__text">
|
||||
<%= answer[:tekst] %>
|
||||
</span>
|
||||
</label>
|
||||
</p>
|
||||
<% end %>
|
||||
</fieldset>
|
||||
</form>
|
||||
<% question[:antwoorden].sort_by{ |x| x[:tekst] }.each_with_index do |answer, idx|%>
|
||||
<% if answer[:vraag] %>
|
||||
|
|
@ -42,14 +40,11 @@
|
|||
|
||||
return postcodes;
|
||||
})();
|
||||
console.log(postcodes);
|
||||
let last_answered = [];
|
||||
|
||||
const postcodeField = document.getElementById("postcodeField");
|
||||
|
||||
const handler = () => {
|
||||
console.log(postcodeField.value);
|
||||
|
||||
const selected = postcodes[postcodeField.value] || [];
|
||||
|
||||
// Update results
|
||||
|
|
|
|||
|
|
@ -2,8 +2,9 @@
|
|||
<h2 class="page-header-sub">Welke verenigingen passen bij jou?</h2>
|
||||
<p>Het invullen van deze quiz zal jou helpen de vereniging te vinden die bij jou past.</p>
|
||||
<p>Niet alle vragen hoeven ingevuld te worden en bij sommige vragen komen plots bijvragen tevoorschijn.</p>
|
||||
<br>
|
||||
<div onclick="goNext()" class="quizSpotlight">
|
||||
<a>Start</a>
|
||||
<a>Start!</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quiz_content">
|
||||
|
|
@ -133,7 +134,6 @@
|
|||
quizIntro.classList.add("hidden");
|
||||
previousButton.style.display = "";
|
||||
|
||||
console.log("here "+state.question.index)
|
||||
if(state.question.index == 0) {
|
||||
previousButton.style.display = "none";
|
||||
nextButton.style.display = "none";
|
||||
|
|
|
|||
Loading…
Reference in a new issue