This was great fun - I got the quiz style idea after looking at https://www.florin-pop.com/ as he has a "10 days of code" challenge with github examples to DL - so the main code is his, with design, content and extra functionality added to suit what I wanted to learn how to do - not much, but using the innerHTML function to add required text and links, and ironing out the code format for JS:
} else { if()
statements that stumped me for a bit, as well as re-capping how to push a footer to page bottom with flex, justifying images instead of only text and image rotation in CSS.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quiz App</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="quiz-container" id="quiz">
<div class="btn">
<button >Restart Quiz</button></div>
<h2>Conspiracy Theorist's Fun Quiz</h2>
<h4>(appropriate links at the end for a 50%+ score)</h4>
<div class="quiz-header">
<h2 id="question">Question text</h2>
<ul>
<li>
<input
type="radio"
id="a"
name="answer"
class="answer"
/>
<label id="a_text" for="a">Question</label>
</li>
<li>
<input
type="radio"
id="b"
name="answer"
class="answer"
/>
<label id="b_text" for="b">Question</label>
</li>
<li>
<input
type="radio"
id="c"
name="answer"
class="answer"
/>
<label id="c_text" for="c">Question</label>
</li>
<li>
<input
type="radio"
id="d"
name="answer"
class="answer"
/>
<label id="d_text" for="d">Question</label>
</li>
</ul>
<div class="correct-hidden">Previous Answer Correct! You're not totally brainwashed...or just a good guesser?</div>
<div class="wrong-hidden">Previous Answer Wrong! You're a socially conditioned sheep...or just an idiot?</div>
</div>
<button id="submit">Submit</button>
</div>
<footer class="footer">Disclaimer: the hypothetical "answers" on this site are not necessarily factually correct or views of the author or site owner
<img src="Paul.png" class="alien rotate-image"
alt="pic"/>
</footer>
</body>
</html>
CSS:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
/* prevents scoll bar stutter */
overflow: hidden;
background-image: linear-gradient(315deg, #bf42e6 0%, #c68fdb 100%);
display: flex;
align-content: center;
align-items: center;
justify-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
margin: 0;
/* to set footer at page bottom */
min-height: 100vh;
flex-direction: column;
}
.footer {
display: flex;
align-items: center;
margin-top: auto;
}
.quiz-container {
background-image: linear-gradient(rgb(230, 129, 208), rgb(225, 157, 241));
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
overflow: hidden;
width: 1000px;
max-height: 100%;
padding: 2rem;
}
.quiz-header {
padding: 4rem;
}
h2 {
text-align: center;
margin: 0;
}
h4 {
padding: 1rem;
text-align: center;
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
font-size: 1.2rem;
margin: 1rem 0;
}
ul li label {
cursor: pointer;
}
button {
background-color: #b157d8;
border: none;
color: white;
cursor: pointer;
display: block;
font-family: inherit;
font-size: 1.1rem;
width: 100%;
padding: 1.3rem;
border: solid 3px black;
border-radius: 10px;
}
button:hover {
background-color: #732d91;
}
button:focus {
background-color: #5e3370;
outline: none;
}
.correct-hidden {
display: none;
}
.wrong-hidden {
display: none;
}
.alien {
padding: 8px;
border-radius: 1000px;
height: 70px;
width: 50px;
align-items: center;
/* center damn images!!?? In the body container, duh!*/
/* img rotation */
-webkit-transform:rotate(5deg);
}
.rotate {
animation: rotation 3s;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.linear {
animation-timing-function: linear;
}
.infinite {
animation-iteration-count: infinite;
}
/* All the above HTML classes here */
.rotate-image {
animation: rotation 2s linear infinite;
}
JS:
const quizData = [
{
question: "The term 'Conspiracy Theory' was first publicised when and by who?",
a: "1952, referring to Colonel Sanders claiming people were planning to steal his KFC recipe",
b: "by the CIA in 1960s re the JFK assasination/Warren Commission cover up",
c: "New York Times, January 11, 1863 re British plans against the US.",
d: "The CIA or the Brits would never do such a thing!",
correct: "c",
},
{
question: "Who is the President of US?",
a: "The CIA",
b: "Pinnochio",
c: "A senile old puppet",
d: "Answers a and c",
correct: "d",
},
{
question: "Most UFOs sightings are most likely to be...",
a: "Alien craft from another planet",
b: "Black Budget military secret tech",
c: "seen by tin foil hat wearing children who believe Santa is real",
d: "answer a and/or b",
correct: "d",
},
{
question:
"Probable reasons for the total destruction of the Twin Towers was..?",
a: "Hutchison Effect energy weapon that causes materials to turn to dust",
b: "The Towers were designed to completely dematerialize if hit by an aircraft",
c: "A coastal, hurricane weather energy vortex and controlled demolitions were factors",
d: "answers a and c",
correct: "d",
},
{
question: "What year was the supposed Roswell UFO crash?",
a: "1947",
b: "1948",
c: "The future",
d: "Aliens never crashed, it was a weather balloon",
correct: "a",
},
{
question:
"Which vector is most likely responsible for the spread of Covid 19 worldwide so quickly?",
a: "Aircraft spraying",
b: "Pangolins",
c: "Bats",
d: "Count Dracula",
correct: "a",
},
{
question:
"The BBC is the propaganda arm of the UK gov, many think, because..",
a: "Anyone who is not socially conditioned can see it",
b: "They don't say they are, so they can't be!",
c: "Controlling the masses beliefs via monopoly media is the most powerful mind control currently publicly known",
d: "answers a and c",
correct: "d",
},
{
question:
"The term 'tin hat wearer' comes from some people claiming they were trying to block MK Ultra/CIA mind control microwave thought transmission tech putting voices in their heads. Would a metal head covering work if the claim were true?",
a: "Only if it was earthed would it act as a Faraday cage",
b: "No, because MK Ultra never happened and microwaves cannot transmit messages to the brain",
c: "Yes, coz the CIA voice in my head told me not to wear one",
d: "Doesn't matter coz media brainwashing does a good enough job anyway",
correct: "d",
},
{
question:
"Does 'Democracy' really exist in practise in the world?",
a: "No, because the last 3 UK Prime Ministers were appointed, not voted for",
b: "No, as most populations don't want war but the West is always in one somewhere",
c: "If you put a gun to my head, or fine me £80 for NOT being on an electoral registor, I'd say it does exist!",
d: "All the above",
correct: "d",
},
{
question: "David Icke is always misquoted re 'Ruling Class Lizard Beings' and 'Son of God' refs. by people who have never studied his excellent socio-political research - so if he's such a fringe lunatic, why is he so dangerous to the powerful as to be regarded a 'Level 3 Terrorist' by the Dutch Government recently?",
a: "He's dangerous as he was in the Green Party once...ironically",
b: "Common sense is not required to attack anyone for freedom of speech - and rightly so!",
c: "Narcissistic, egomaniacal rulers don't like the truth being exposed about their plans",
d: "Answers b and c",
correct: "c",
},
];
const btnReload = document.querySelector(".btn");
btnReload.addEventListener("click", () => {
const answer = location.reload();
});
const quiz = document.getElementById("quiz");
const answerEls = document.querySelectorAll(".answer");
const questionEl = document.getElementById("question");
const a_text = document.getElementById("a_text");
const b_text = document.getElementById("b_text");
const c_text = document.getElementById("c_text");
const d_text = document.getElementById("d_text");
const submitBtn = document.getElementById("submit");
let currentQuiz = 0;
let score = 0;
loadQuiz();
function loadQuiz() {
deselectAnswers();
const currentQuizData = quizData[currentQuiz];
questionEl.innerText = currentQuizData.question;
a_text.innerText = currentQuizData.a;
b_text.innerText = currentQuizData.b;
c_text.innerText = currentQuizData.c;
d_text.innerText = currentQuizData.d;
}
function getSelected() {
let answer = undefined;
answerEls.forEach((answerEl) => {
if (answerEl.checked) {
answer = answerEl.id;
}
});
return answer;
}
function deselectAnswers() {
answerEls.forEach((answerEl) => {
answerEl.checked = false;
});
}
const correctHidden = document.querySelector(".correct-hidden");
const wrongHidden = document.querySelector(".wrong-hidden");
correctHidden.classList.add("correct-hidden");
wrongHidden.classList.add("wrong-hidden");
submitBtn.addEventListener("click", () => {
// check to see the answer
const answer = getSelected();
if (answer) {
if (answer === quizData[currentQuiz].correct) {
score++;
console.log(answer);
correctHidden.classList.remove("correct-hidden");
wrongHidden.classList.add("wrong-hidden");
} else {
console.log(answer);
wrongHidden.classList.remove("wrong-hidden");
correctHidden.classList.add("correct-hidden");
}
currentQuiz++;
if (currentQuiz < quizData.length) {
const answer = getSelected();
loadQuiz();
// You HAVE to have this format for else/if!!: } else { if()
} else { if (score/quizData.length <= 0.5) {
quiz.innerHTML = `<button onclick="location.reload()">Play Again</button>
<h2>You answered ${score}/${quizData.length} questions correctly - according to "Conspiracy Theorists".</h2>
<p><center><h3>You are a comformist, non independent thinking, media repeating sheep that believes everything your Gov and their Media tell you is true...baaaah! You need to develop your critical thinking, break your social conditioning and stop believing your Government (Romantic languages translation: gobernar, to control/dominate; mente, the mind ) has your best interests at heart - they don't give a flying oh dear! about you, as they now want to cull your numbers (as now formally announced by the UN Climate Framework) to fit their belief in the carrying capacity of the planet and it's resources; You too are merely a resource used for energy, tax and military cannon fodder as necessary in their wars of Empire, ownership and planetary control.
They are all Elitist, globalist, narcissist psychopaths and sociopaths that have their own cult belief system based on a Luciferian, masonic doctrine"</h3></center></p>`
} else {
quiz.innerHTML = `<button onclick="location.reload()">Play Again</button>
<p><h2>You answered ${score}/${quizData.length} questions correctly - according to "Conspiracy Theorists".</h2></p>
<center><h3>You are a delusional, relatively free thinking but possibly paranoid Terrorist and a threat to the world's control system according to recent Dutch law, as David Icke is now categorized as such, i.e. a "Level 3 Terrorist" according to this ruling, so disallowed access to the EU Schengen Zone (26 countries) for 2 years. Your free Tin Hat is in the Post...and this software knows exactly who you are and where you live! They're coming for you soon enough...their technocracy monitors everything and knows all about you!"</h3></center>
<center><a href="https://hapgood.us/2018/12/24/the-first-use-of-the-term-conspiracy-theory-is-much-earlier-and-more-interesting-than-historians-have-thought/" target="_blank"">term-conspiracy-theory</a></center>
<center><a href="https://en.wikipedia.org/wiki/Central_Intelligence_Agency" target="_blank"">CIA</a></center>
<center><a href="https://www.richplanet.net/richp_genre.php?ref=221&part=1&gen=99" target="_blank"">Twin Towers</a></center>
<center><a href="https://www.richplanet.net/richp_genre_menu.php?gen=13" target="_blank"">UFOs</a></center>
<center><a href="https://youtu.be/yv5736hCpPY" target="_blank"">Aircraft Spraying of Chemicals or Pathogens</a></center>
<center><a href="https://www.ukcolumn.org/search?keywords=bbc" target="_blank"">British Brainwashing Corp</a></center>
<center><a href="https://www.livescience.com/what-is-a-faraday-cage#:~:text=Does%20a%20faraday%20cage%20need,exterior%20of%20a%20Faraday%20cage." target="_blank"">Faraday Cage</a></center>
<center><a href="https://youtu.be/LQucESRF3Sg" target="_blank"">MK Ultra</a></center>
<center><a href="https://www.youtube.com/watch?v=fKY7XsaJLwI&ab_channel=Redacted" target="_blank"">Depopulation</a></center>
`;
}
}
}
});
// }