Commit 38edc38b authored by Felix Felbermayer's avatar Felix Felbermayer
Browse files

diplay question

parent 07e854fc
node_modules
\ No newline at end of file
export function delay(){
return new Promise(function(resolve){
setTimeout(resolve, 200)
})
}
\ No newline at end of file
<!doctype html>
<html>
<head>
<title>FHS-Modules</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Frontend WS2020-Js Quiz</h1>
<h3 id="home">Click <a href="">here</a> to start the quiz!</h3>
<h3 id="quiz">Click <a href="">here</a> to home!</h3>
<div id="content">
</div>
<script src="index.js" type="module"></script>
</body>
</html>
\ No newline at end of file
// index.js
import { getQuestions } from './questions.js'
import {askQuestion, answerQuestion} from './quiz.js'
window.addEventListener('load', function () {
const onRender = () =>{
const {pathname} = window.location
if(pathname==='/'){
let hide=document.getElementById('quiz')
let nothide=document.getElementById('home')
hide.style.display="none";
nothide.style.display="initial";
}else if(pathname==='/quiz'){
displayQuiz()
let hide=document.getElementById('home')
hide.style.display="none";
}else if(pathname==='/result'){
document.getElementById('content').innerHTML='result'
}
else{
document.getElementById('content').innerHTML='not found'
}
}
onRender();
Array.from(document.querySelectorAll('a'))[0].addEventListener('click',(evt) => {
evt.preventDefault()
history.pushState({}, 'quiz', '/quiz')
onRender()
})
Array.from(document.querySelectorAll('a'))[1].addEventListener('click',(evt) => {
evt.preventDefault()
history.pushState({}, 'home', '/')
onRender()
})
Array.from(document.getElementsByClassName('answer')).forEach(
function (item){item.addEventListener('click',(evt) => {
console.log("hey")
evt.preventDefault()
history.pushState({}, 'result', '/result')
onRender()
})})
})
function createQuizItem(content,num) {
let p = document.createElement('a');
p.setAttribute("href", "");
p.setAttribute("id", num);
p.setAttribute("class", "answer");
p.textContent = content;
return p;
}
function createQuestion(content) {
let p = document.createElement('p');
p.textContent = content;
return p;
}
async function displayQuiz(){
const question = await askQuestion()
document.getElementById('content').appendChild(createQuestion(question.question))
document.getElementById('content').appendChild(createQuizItem('a: '+question.a,'a'))
document.getElementById('content').appendChild(createQuizItem('b: '+question.b,'b'))
document.getElementById('content').appendChild(createQuizItem('c: '+question.c,'c'))
document.getElementById('content').appendChild(createQuizItem('d: '+question.d,'d'))
/* let a= await prompt("Enter answer") */
/* const answer = await answerQuestion(question, a)
console.log(answer ? 'correct' : 'incorrect') */
}
{
"name": "fhs-modules",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"async": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
"integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
"requires": {
"lodash": "^4.17.14"
}
},
"basic-auth": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-1.1.0.tgz",
"integrity": "sha1-RSIe5Cn37h5QNb4/UVM/HN/SmIQ="
},
"colors": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
"integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA=="
},
"corser": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
"integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c="
},
"debug": {
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
"requires": {
"ms": "^2.1.1"
}
},
"ecstatic": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/ecstatic/-/ecstatic-3.3.2.tgz",
"integrity": "sha512-fLf9l1hnwrHI2xn9mEDT7KIi22UDqA2jaCwyCbSUJh9a1V+LEUSL/JO/6TIz/QyuBURWUHrFL5Kg2TtO1bkkog==",
"requires": {
"he": "^1.1.1",
"mime": "^1.6.0",
"minimist": "^1.1.0",
"url-join": "^2.0.5"
}
},
"eventemitter3": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
},
"follow-redirects": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
"integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
},
"he": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
},
"http-proxy": {
"version": "1.18.1",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
"integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
"requires": {
"eventemitter3": "^4.0.0",
"follow-redirects": "^1.0.0",
"requires-port": "^1.0.0"
}
},
"http-server": {
"version": "0.12.3",
"resolved": "https://registry.npmjs.org/http-server/-/http-server-0.12.3.tgz",
"integrity": "sha512-be0dKG6pni92bRjq0kvExtj/NrrAd28/8fCXkaI/4piTwQMSDSLMhWyW0NI1V+DBI3aa1HMlQu46/HjVLfmugA==",
"requires": {
"basic-auth": "^1.0.3",
"colors": "^1.4.0",
"corser": "^2.0.1",
"ecstatic": "^3.3.2",
"http-proxy": "^1.18.0",
"minimist": "^1.2.5",
"opener": "^1.5.1",
"portfinder": "^1.0.25",
"secure-compare": "3.0.1",
"union": "~0.5.0"
}
},
"lodash": {
"version": "4.17.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
},
"mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
},
"minimist": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
},
"mkdirp": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
"integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
"requires": {
"minimist": "^1.2.5"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"opener": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A=="
},
"portfinder": {
"version": "1.0.28",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
"integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
"requires": {
"async": "^2.6.2",
"debug": "^3.1.1",
"mkdirp": "^0.5.5"
}
},
"qs": {
"version": "6.9.4",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
"integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ=="
},
"requires-port": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
},
"secure-compare": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
"integrity": "sha1-8aAymzCLIh+uN7mXTz1XjQypmeM="
},
"union": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
"integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
"requires": {
"qs": "^6.4.0"
}
},
"url-join": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.5.tgz",
"integrity": "sha1-WvIvGMBSoACkjXuCxenC4v7tpyg="
}
}
}
{
"name": "fhs-modules",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "http-server --proxy http://localhost:8080"
},
"author": "",
"license": "ISC",
"dependencies": {
"http-server": "^0.12.3"
}
}
import {delay} from './delay.js'
let questions=[
{
"question" : "Wie nennt man ein Selfie, das nur die Schuhe zeigt?",
"correctAnswer" : "a",
"a" : "Shoefie",
"b" : "Shelfie",
"c" : "Selfoe",
"d" : "Footfie"
},
{
"question" : "In welchem Hotel in Paris wohnte Coco Channel?",
"correctAnswer" : "c",
"a" : "Marriot",
"b" : "Hilton",
"c" : "Ritz",
"d" : "Plaza Athénée Paris"
},
{
"question" : "Welche ist die meistgefälschte Marke der Welt?",
"correctAnswer" : "a",
"a" : "Nike",
"b" : "Beats by Dr. Dre",
"c" : "Luis Vitton",
"d" : "Jbl"
},
{
"question" : "Durch welche Musik lassen sich Weiße Haie anlocken.",
"correctAnswer" : "b",
"a" : "Hip-Hop",
"b" : "Death Metal",
"c" : "Schlager",
"d" : "Pop"
},
{
"question" : "Was ist ein Anzeichen dafür, dass Koalas gestresst sind?",
"correctAnswer" : "d",
"a" : "Gibt keine anzeichen",
"b" : "Sie fallen vom Baum",
"c" : "Sie fiepsen hysterisch",
"d" : "Sie Bekommen Schluckauf"
}
];
export async function getQuestions(){
await delay();
return questions
}
\ No newline at end of file
import {getQuestions} from './questions.js'
export async function askQuestion(){
const questions = await getQuestions();
let rnd = Math.floor(Math.random() * Math.floor(5));
return questions[rnd]
}
export async function answerQuestion(question, a){
if(question.correctAnswer === a) return true
else return false
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: rgb(158, 158, 158);
max-width: 80%;
text-align: center;
margin-left: 10%;
}
h1{
margin-top: 1em;
margin-bottom: 0.7em;
}
\ No newline at end of file
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