Skip to content

corrected mobile responsiveness and added couple of changes to the report section to clean it up. #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

corrected mobile responsiveness and added couple of changes to the report section to clean it up. #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,12 @@

<body>

<div id="start-container" class="start-container" >
<div id="start-container" class="start-container">
<button class="click" id="start">Start Quiz</button>
</div>

<div class="main-container hide" id="main-container">
<div class="flex-container">
<h1>The Quiz App</h1>
<p id="question">Loading question...</p>
<div class="radio-div" onclick="flip1()">
Expand All @@ -38,18 +39,21 @@ <h1>The Quiz App</h1>
<button id="click" class="click">Next Question</button>
</div>
<p id="timer">20</p>
</div>
</div>
<div class="end-container hide" id="end-container">
<h1>Quiz App</h1>
<p id="result"></p>
<p id="report" class="report"></p>
<div class="flex-container">
<h1>Quiz App</h1>
<p id="result"></p>
<p id="report" class="report"></p>
</div>
</div>

<script>
let flip1 = ()=>{radio1.checked=true}
let flip2 = ()=>{radio2.checked=true}
let flip3 = ()=>{radio3.checked=true}
let flip4 = ()=>{radio4.checked=true}
let flip1 = () => { radio1.checked = true }
let flip2 = () => { radio2.checked = true }
let flip3 = () => { radio3.checked = true }
let flip4 = () => { radio4.checked = true }
</script>
<script type="module" src="main.js"></script>
</body>
Expand Down
230 changes: 111 additions & 119 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,158 +1,150 @@
function test() {
console.log('testing')
console.log("testing");
}

let questionSpace = document.getElementById('question')
let submits = document.getElementById('click')
let radio1 = document.getElementById('radio1')
let radio2 = document.getElementById('radio2')
let radio3 = document.getElementById('radio3')
let radio4 = document.getElementById('radio4')
let radio1txt = document.getElementById('radio1txt')
let radio2txt = document.getElementById('radio2txt')
let radio3txt = document.getElementById('radio3txt')
let radio4txt = document.getElementById('radio4txt')
let begin = document.getElementById('start-container')
let app = document.getElementById('main-container')
let end = document.getElementById('end-container')
let result = document.getElementById('result')
let report = document.getElementById('report')
let startbtn = document.getElementById('start')
let questionSpace = document.getElementById("question");
let submits = document.getElementById("click");
let radio1 = document.getElementById("radio1");
let radio2 = document.getElementById("radio2");
let radio3 = document.getElementById("radio3");
let radio4 = document.getElementById("radio4");
let radio1txt = document.getElementById("radio1txt");
let radio2txt = document.getElementById("radio2txt");
let radio3txt = document.getElementById("radio3txt");
let radio4txt = document.getElementById("radio4txt");
let begin = document.getElementById("start-container");
let app = document.getElementById("main-container");
let end = document.getElementById("end-container");
let result = document.getElementById("result");
let report = document.getElementById("report");
let startbtn = document.getElementById("start");

async function fetchJSONData() {
let res = await fetch("./data.json")
return await res.json()
let res = await fetch("./data.json");
return await res.json();
}

let temp = await fetchJSONData()

let finalMessage = "The correct answer for the following answers were: <br>"
let correct = 0
let timer
let qNo = 0
let time = 20
let questionArray = []
createShuffleArr()
let temp = await fetchJSONData();

let finalMessage = "The correct answer for the following answers were: <br>";
let correct = 0;
let timer;
let qNo = 0;
let time = 20;
let questionArray = [];
createShuffleArr();

startbtn.addEventListener("click", () => {
app.classList.remove('hide')
begin.classList.add('hide')
start()
})
app.classList.remove("hide");
begin.classList.add("hide");
start();
});

function start() {
getquestion()
timer = setInterval(
quiz,
1000
)
getquestion();
timer = setInterval(quiz, 1000);
}

function quiz() {
ticktock()
submits.addEventListener("click", check);
if (qNo == 9 && time == 0) {
quizEnd()
}
else if (time == 0) {
qNo++
timerReset()
}
ticktock();
submits.addEventListener("click", check);
if (qNo == 9 && time == 0) {
quizEnd();
} else if (time == 0) {
qNo++;
timerReset();
}
}

function ticktock() {
time--
document.getElementById('timer').innerHTML = time
time--;
document.getElementById("timer").innerHTML = time;
}

function check() {
let answer = checkRadio()
if (answer == temp.questions[questionArray[qNo]].answer) {
correct++
}
else {
updateMessage()
}
if (qNo == 9) {
quizEnd()
}
else {
qNo++
timerReset()
}
getquestion()
let answer = checkRadio();
if (answer == temp.questions[questionArray[qNo]].answer) {
correct++;
} else {
updateMessage();
}
if (qNo == 9) {
quizEnd();
} else {
qNo++;
timerReset();
}
getquestion();
}

function checkRadio() {
if (radio1.checked) {
return 1
}
else if (radio2.checked) {
return 2
}
else if (radio3.checked) {
return 3
}
else if (radio4.checked) {
return 4
}
else {
return 0
}
if (radio1.checked) {
return 1;
} else if (radio2.checked) {
return 2;
} else if (radio3.checked) {
return 3;
} else if (radio4.checked) {
return 4;
} else {
return 0;
}
}

function updateMessage() {
let that = 'option' + temp.questions[questionArray[qNo]].answer
finalMessage += '<br>' + temp.questions[questionArray[qNo]].question + ' : ' + temp.questions[questionArray[qNo]][that]
let that = "option" + temp.questions[questionArray[qNo]].answer;
finalMessage +=
"<p class='question-text'>" +
temp.questions[questionArray[qNo]].question +
"</p>" +
"<i>" +
temp.questions[questionArray[qNo]][that] +
"</i><div class='divider'></div>";
}

function quizEnd() {
clearInterval(timer)
app.classList.add('hide')
end.classList.remove('hide')
result.innerHTML = 'You got ' + correct + ' answers correct out of ' + 10
if (correct != temp.questions.length) {
report.innerHTML = finalMessage
}
clearInterval(timer);
app.classList.add("hide");
end.classList.remove("hide");
result.innerHTML = "You got " + correct + " answers correct out of " + 10;
if (correct != temp.questions.length) {
report.innerHTML = finalMessage;
}
}

function timerReset() {
time = 20
time = 20;
}

function getquestion() {
console.log("Question change")
document.getElementById('radioDiv3').classList.remove('hide')
document.getElementById('radioDiv4').classList.remove('hide')
questionSpace.innerHTML = temp.questions[questionArray[qNo]].question

radio1txt.innerHTML = temp.questions[questionArray[qNo]].option1
radio2txt.innerHTML = temp.questions[questionArray[qNo]].option2

if (temp.questions[questionArray[qNo]].option3 != '') {
radio3txt.innerHTML = temp.questions[questionArray[qNo]].option3
}
else {
document.getElementById('radioDiv3').classList.add('hide')
}
if (temp.questions[questionArray[qNo]].option4 != '') {
radio4txt.innerHTML = temp.questions[questionArray[qNo]].option4
}
else {
document.getElementById('radioDiv4').classList.add('hide')
}
console.log("Question change");
document.getElementById("radioDiv3").classList.remove("hide");
document.getElementById("radioDiv4").classList.remove("hide");
questionSpace.innerHTML = temp.questions[questionArray[qNo]].question;

radio1txt.innerHTML = temp.questions[questionArray[qNo]].option1;
radio2txt.innerHTML = temp.questions[questionArray[qNo]].option2;

if (temp.questions[questionArray[qNo]].option3 != "") {
radio3txt.innerHTML = temp.questions[questionArray[qNo]].option3;
} else {
document.getElementById("radioDiv3").classList.add("hide");
}
if (temp.questions[questionArray[qNo]].option4 != "") {
radio4txt.innerHTML = temp.questions[questionArray[qNo]].option4;
} else {
document.getElementById("radioDiv4").classList.add("hide");
}
}


function createShuffleArr() {
for (var i = 0; i < temp.questions.length; i++) {
questionArray.push(i)
}
for (let i = questionArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = questionArray[i];
questionArray[i] = questionArray[j];
questionArray[j] = temp;
}
}
for (var i = 0; i < temp.questions.length; i++) {
questionArray.push(i);
}
for (let i = questionArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = questionArray[i];
questionArray[i] = questionArray[j];
questionArray[j] = temp;
}
}
Loading