Skip to content

Commit

Permalink
Merge pull request #2 from Emile2020/dev
Browse files Browse the repository at this point in the history 
I have completely rewritte, how this project works.
  • Loading branch information
@emidblol
emidblol authored Oct 21, 2022
2 parents ec14ada + f56d12e commit 9a2893d
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 121 deletions.
35 changes: 6 additions & 29 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,13 @@ This is a example for a simple quiz
3. Run `npm start`
4. Open your browser and go to `http://localhost:3000`
## How to edit questions
1. go to `src/index.html`
2. In the `questions` element, follow the following structure and fill in between the brackets:
```html
<div id="question_(question number)_div">
<h4 id="q3">(question)</h4>
<input type="text" name="question (question number)" id="question_(question number)" data-answer="(answer of the question)">
</div><br><br>
1. Open the file `questions.json`
2. Edit the questions in the questions array with the following format:
```json
{"question": "(question)", "answer": "(answer)"}
```
3. In the script tag, follow the following structure and fill in between the brackets:
```js
async function question(question_number)_submit() {
var question_(question_number) = document.getElementById("question_(question_number)");
question_(question_number).disabled = true;
//set the cookie 1 to the value of the question and remove the expiry date
document.cookie = "question_1=" + question_(question_number).value + "; expires=Thu, 01 Jan 3000 00:00:00 UTC; path=/;";
//check if the answer is correct
if (question_(question_number).value === question_(question_number).dataset.answer) {
question_(question_number).style.backgroundColor = "green";
question_(question_number).style.color = "white";
return true;
} else {
question_(question_number).style.backgroundColor = "red";
question_(question_number).style.color = "white";
return false;
}
}
```
4. Add the newly made functions to the submit_all function at the start
5. In the html, edit the number in the score element to the amount of questions you have
6. In the script tag and in the submit_all() function, edit the score_total variable to the amount of questions you have
3. Save the file
4. No need to restart the server, the questions will be reloaded automatically
## How to contribute
1. Fork the repository
2. Make your changes
Expand Down
166 changes: 74 additions & 92 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="favicon" content="favicon.ico">
<link rel="json" href="questions.json">
<title>Document</title>
</head>

<body>
<questions>
<div id="question_1_div">
<h4 id="q1">What is the year that never gonna give you up was released?</h4> <br>
<input type="text" name="question 1" id="question_1" data-answer="1987">
</div><br><br>
<div id="question_2_div">
<h4 id="q2">What do you call the instrument that helps planes land in no visibility??</h4>
<input type="text" name="question 2" id="question_2" data-answer="ILS">
</div><br><br>
<div id="question_3_div">
<h4 id="q3">What is the biggest discord server</h4>
<input type="text" name="question 3" id="question_3" data-answer="Midjourney">
</div><br><br>

</questions>
<br>
<input type="button" value="Submit" onclick="submit_all()" id="submit" href="#">
Expand Down Expand Up @@ -58,6 +48,7 @@ <h2 id="score">Score: /2</h2>
transition: background-color 2s, color 2s;
padding: 12px 20px;
}

/*put the score in the top right corner*/
#score {
position: absolute;
Expand Down Expand Up @@ -97,88 +88,79 @@ <h2 id="score">Score: /2</h2>
}
</style>
<script>
//check if the cookie exists
if (!document.cookie == "") {
//set the value of question_1 to the value of the question_1 cookie
document.getElementById("question_1").value = document.cookie.split(";")[0].split("=")[1];
//set the value of question_2 to the value of the question_2 cookie
document.getElementById("question_2").value = document.cookie.split(";")[1].split("=")[1];
//disable the inputs
document.getElementById("question_1").disabled = true;
document.getElementById("question_2").disabled = true;
//change the text of the submit button
document.getElementById("submit").value = "You have already submitted";
//disable the submit button
document.getElementById("submit").disabled = true;
//run submit_all
submit_all();
}
async function question1_submit() {
var question_1 = document.getElementById("question_1");
question_1.disabled = true;
//set the cookie 1 to the value of the question and remove the expiry date
document.cookie = "question_1=" + question_1.value + "; expires=Thu, 01 Jan 3000 00:00:00 UTC; path=/;";
//check if the answer is correct
if (question_1.value === question_1.dataset.answer) {
question_1.style.backgroundColor = "green";
question_1.style.color = "white";
return true;
} else {
question_1.style.backgroundColor = "red";
question_1.style.color = "white";
return false;
}
}
async function question2_submit() {
var question_2 = document.getElementById("question_2");
question_2.disabled = true;
//set the cookie 2 to the value of the question and remove the expire date
document.cookie = "question_2=" + question_2.value + "; expires=Thu, 01 Jan 3000 00:00:00 UTC;";
//check if the answer is correct
if (question_2.value === question_2.dataset.answer) {
question_2.style.backgroundColor = "green";
question_2.style.color = "white";
return true;
} else {
question_2.style.backgroundColor = "red";
question_2.style.color = "white";
return false;
function submit_all() {
//get all the questions
var questions = document.getElementsByTagName("input");
//remove the submit button from the list of questions
questions = Array.from(questions).slice(0, -1);
//get the score
var score = document.getElementById("score");
//set the score to 0
score.innerHTML = "Score: 0/" + questions.length;
//for all the questions
for (var i = 0; i < questions.length; i++) {
//get the question
var question = questions[i];
question.disabled = true;
//get the answer
var answer = question.dataset.answer.toLowerCase();
console.log(answer);
//get the value of the question
var value = question.value;
//save the value to lower case
var value = value.toLowerCase();
//save the answer to cookies
document.cookie = "answer_" + i + "=" + value + ";SameSite=None;Secure";
//if the answer is correct
if (value == answer) {
//change the background color to green
question.style.backgroundColor = "green";
//change the text color to white
question.style.color = "white";
//get the score
var score = document.getElementById("score");
//get the score
var score_text = score.innerHTML;
//split the score
var score_split = score_text.split("/");
//get the score
var score_number = score_split[0];
//split the score
var score_number_split = score_number.split(":");
//get the score
var score_number_number = score_number_split[1];
//add 1 to the score
score_number_number++;
//set the score
score.innerHTML = "Score: " + score_number_number + "/" + questions.length;
} else {
//change the background color to red
question.style.backgroundColor = "red";
//change the text color to white
question.style.color = "white";
}
}
}
async function question3_submit() {
var question_3 = document.getElementById("question_3");
question_3.disabled = true;
//set the cookie 3 to the value of the question and remove the expire date
document.cookie = "question_3=" + question_3.value + "; expires=Thu, 01 Jan 3000 00:00:00 UTC;";
//check if the answer is correct
if (question_3.value === question_3.dataset.answer) {
question_3.style.backgroundColor = "green";
question_3.style.color = "white";
return true;
} else {
question_3.style.backgroundColor = "red";
question_3.style.color = "white";
return false;
}
}
async function submit_all() {
var question1a = await question1_submit();
var question2a = await question2_submit();
var question3a = await question3_submit();
//calculate score
var score = 0;
var total_score = 3;
if (question1a) {
score++;
}
if (question2a) {
score++;
}
if (question3a) {
score++;

//read all the questions from questions.json and add it to index.html
function readQuestions() {
//get the json from questions.json
var request = new XMLHttpRequest();
request.open("GET", "questions.json", false);
request.send(null)
var json = JSON.parse(request.responseText);
var questions = json.questions
var html = '';
var question_count = 0;
for (var i = 0; i < questions.length; i++) {
html += `<div id="question_${i}_div">
<h4 id="${i}">${questions[i].question}</h4>
<input type="text" name="question ${i}" id="question_${i}" data-answer="${questions[i].answer}">
</div><br><br>`
question_count++;
}
document.getElementById("score").innerHTML = "Score: " + score + "/" + total_score;
//console log the cookies
console.log(document.cookie);
document.querySelector("questions").innerHTML = html;
document.getElementById("score").innerHTML = "Score: /" + question_count;
}
readQuestions();
</script>
16 changes: 16 additions & 0 deletions src/questions.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"questions": [
{
"question": "What is the capital of France?",
"answer": "Paris"
},
{
"question": "When was never gonna give you up released?",
"answer": "1987"
},
{
"question": "What is the system for landing a plane called? (use the acronym)",
"answer": "ILS"
}
]
}

0 comments on commit 9a2893d

Please sign in to comment.