From d06788a1df4842b3e11973bded4a5447f0ce77e7 Mon Sep 17 00:00:00 2001 From: Kaushik Date: Wed, 4 Oct 2023 19:21:24 +0530 Subject: [PATCH] added project Quizapp --- contributors/contributorsList.js | 4 +- projects/QuizAPP-main/.gitignore | 2 + projects/QuizAPP-main/index.html | 45 ++++ projects/QuizAPP-main/index.js | 338 +++++++++++++++++++++++++++++++ projects/QuizAPP-main/style.css | 147 ++++++++++++++ 5 files changed, 534 insertions(+), 2 deletions(-) create mode 100644 projects/QuizAPP-main/.gitignore create mode 100644 projects/QuizAPP-main/index.html create mode 100644 projects/QuizAPP-main/index.js create mode 100644 projects/QuizAPP-main/style.css diff --git a/contributors/contributorsList.js b/contributors/contributorsList.js index 2146cd3..5f5692e 100644 --- a/contributors/contributorsList.js +++ b/contributors/contributorsList.js @@ -6,7 +6,7 @@ contributors = [ }, { id: 2, - fullname: "sample 2", - username: "https://github.com/TechHack3", + fullname: "Kaushik Shetty", + username: "https://github.com/Kaushik100001", } ]; diff --git a/projects/QuizAPP-main/.gitignore b/projects/QuizAPP-main/.gitignore new file mode 100644 index 0000000..da8d1e2 --- /dev/null +++ b/projects/QuizAPP-main/.gitignore @@ -0,0 +1,2 @@ + +.vscode/settings.json diff --git a/projects/QuizAPP-main/index.html b/projects/QuizAPP-main/index.html new file mode 100644 index 0000000..67d8204 --- /dev/null +++ b/projects/QuizAPP-main/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + + Document + + + + +
+
+
+ QUESTION +
+
+ option 1 + option 2 + option 3 + option 4 +
+
+
+ + +

POINTS:0

+ +
+ + + + +
+ + + + + + + \ No newline at end of file diff --git a/projects/QuizAPP-main/index.js b/projects/QuizAPP-main/index.js new file mode 100644 index 0000000..d741a44 --- /dev/null +++ b/projects/QuizAPP-main/index.js @@ -0,0 +1,338 @@ +let questions = [ + { + + question: "Eritrea, which became the 182nd member of the UN in 1993, is in the continent of", + answers: [ + { text: "Asia", correct: "w" }, + { text: "Europe", correct: "w" }, + { text: "Africa", correct : "r" }, + { text: "Australia", correct: "w" } + + + + ] + + }, + { + + question: "Grand Central Terminal, Park Avenue, New York is the world's", + answers: [ + { text: "largest railway station", correct: "r" }, + { text: "highest railway station", correct: "w" }, + { text: "longest railway station", correct: "w" }, + { text: "None of Above", correct: "w" } + + + ] + + }, + { + + question: "Hitler party which came into power in 1933 is known as", + answers: [ + { text: "Labour Party", correct: "w" }, + { text: "Nazi Party", correct: "r" }, + { text: "Ku-Klux-Klan", correct: "w" }, + { text: " Democratic Party", correct: "w" } + + + ] + + }, + { + + question: "First China War was fought between", + answers: [ + { text: "China and Britain", correct: "r" }, + { text: "China and France", correct: "w" }, + { text: "China and Egypt", correct: "w" }, + { text: "China and Greek", correct: "w" } + + + ] + + }, + { + + question: "Federation Cup, World Cup, Allywyn International Trophy and Challenge Cup are awarded to winners of", + answers: [ + { text: "Tennis", correct: "w" }, + { text: "Volleyball", correct: "r" }, + { text: "Basketball", correct: "w" }, + { text: "Cricket", correct: "w" } + + + ] + + }, + { + + question: "Guwahati High Court is the judicature of", + answers: [ + { text: "Nagaland", correct: "w" }, + { text: "Arunachal Pradesh", correct: "w" }, + { text: "Assam", correct: "w" }, + { text: " All of the above", correct: "r" } + + + ] + + }, + { + question: " Fire temple is the place of worship of which of the following religion?", + answers: [ + { text: "Taoism", correct: "w" }, + { text: "Judaism", correct: "w" }, + { text: "Zoroastrianism (Parsi Religion)", correct: "r" }, + { text: "Shintoism", correct: "w" } + + + ] + }, + { + question: "Golf player Vijay Singh belongs to which country?", + answers: [ + { text: "USA", correct: "w" }, + { text: "Fiji", correct: "r" }, + { text: "India", correct: "w" }, + { text: "UK", correct: "w" } + + + ] + }, + { + question: "Garampani sanctuary is located at", + answers: [ + { text: "Junagarh, Gujarat", correct: "w" }, + { text: "Diphu, Assam", correct: "r" }, + { text: "Kohima, Nagaland", correct: "w" }, + { text: "Gangtok, Sikkim", correct: "w" } + + + ] + }, + { + question: "Who amongst the following had called Rabindranath Tagore as THE GREAT SENTINEL ?", + answers: [ + { text: "Abul Kalam Azad", correct: "w" }, + { text: "Mahatma Gandhi", correct: "r" }, + { text: "Dr. Rajendra Prasad", correct: "w" }, + { text: "Subhash Chandra Bose", correct: "w" } + + + ] + }, + + + + + + +] + + +let i = 0; +document.getElementById("next").addEventListener("click", setnewQuestion) + + + + +const op1 = document.getElementById('op1'); +const op2 = document.getElementById('op2'); +const op3 = document.getElementById('op3'); +const op4 = document.getElementById('op4'); + + + + +document.getElementById("start").addEventListener("click", Startgame) + + + + +let shuffledQuestion, currentquestionindex + + + +function Startgame() { + + document.getElementById("start").classList.add('hide') + document.getElementById("que").classList.remove('hide') + document.getElementById("P").classList.remove('hide') + document.getElementById("neutral").classList.add('neutral') + if(i<=9){ + + document.getElementById("question").innerText = `${i + 1})` + " " + questions[i].question + option() + } + else{ + document.getElementById("que").classList.add('hide') + document.getElementById("P").classList.add('middle') + } + + +} + + + + + + +function option() { + document.getElementById("op1").innerText = "a)" + " " + questions[i].answers[0].text + document.getElementById("op2").innerText = "b)" + " " + questions[i].answers[1].text + document.getElementById("op3").innerText = "c)" + " " + questions[i].answers[2].text + document.getElementById("op4").innerText = "d)" + " " + questions[i].answers[3].text +} + + + + + + + +function setnewQuestion() { + i++; + console.log(i) + Startgame() + document.getElementById("neutral").classList.add('neutral') + + +} + + + + +let P=1 + + +op1.addEventListener("click", () => { + if (questions[i].answers[0].correct === "r") { + document.body.style.backgroundColor = "green"; + document.getElementById("op1").style.color = "green"; + let a = document.getElementById("number").innerText=P++ + setTimeout(() => { + document.body.style.backgroundColor = "#554994"; + + }, 1500) + setTimeout(() => { + document.getElementById("op1").style.color = "black"; + setnewQuestion() + }, 1500) + + } + else { + document.body.style.backgroundColor = "red"; + document.getElementById("op1").style.color = "red"; + + setTimeout(() => { + document.body.style.backgroundColor = "#554994"; + }, 1500) + setTimeout(() => { + document.getElementById("op1").style.color = "black"; + setnewQuestion() + }, 1500) + } + + + + + +}) +op2.addEventListener("click", () => { + + if (questions[i].answers[1].correct === "r") { + document.body.style.backgroundColor = "green"; + document.getElementById("op2").style.color = "green"; + + setTimeout(() => { + document.getElementById("op2").style.color = "black"; + document.body.style.backgroundColor = "#554994"; + setnewQuestion() + }, 1500) + let a = document.getElementById("number").innerText=P++ + + } + else { + document.getElementById("neutral").classList.add('wrong') + document.body.style.backgroundColor = "red"; + document.getElementById("op2").style.color = "red"; + setTimeout(() => { + document.body.style.backgroundColor = "#554994"; + }, 1500) + setTimeout(() => { + document.getElementById("op2").style.color = "black"; + setnewQuestion() + }, 1500) + } +}) + + + + +op3.addEventListener("click", () => { + + if (questions[i].answers[2].correct === "r") { + document.body.style.backgroundColor = "green"; + document.getElementById("op3").style.color = "green"; + setTimeout(() => { + document.getElementById("op3").style.color = "black"; + document.body.style.backgroundColor = "#554994"; + setnewQuestion() + }, 1500) + let a = document.getElementById("number").innerText=P++ + + } + else { + document.getElementById("neutral").classList.add('wrong') + document.body.style.backgroundColor = "red"; + document.getElementById("op3").style.color = "red"; + setTimeout(() => { + document.body.style.backgroundColor = "#554994"; + }, 1500) + setTimeout(() => { + document.getElementById("op3").style.color = "black"; + setnewQuestion() + + }, 1500) +} +}) + + + + + + + +op4.addEventListener("click", () => { + + if (questions[i].answers[3].correct === "r") { + document.body.style.backgroundColor = "green"; + + document.getElementById("op4").style.color = "green"; + + setTimeout(() => { + setnewQuestion() + document.body.style.backgroundColor = "#554994"; + document.getElementById("op4").style.color = "black"; + }, 1500) + let a = document.getElementById("number").innerText=P++ + + } + else { + document.getElementById("neutral").classList.add('wrong') + document.body.style.backgroundColor = "red"; + document.getElementById("op4").style.color = "red"; + + setTimeout(() => { + document.body.style.backgroundColor = "#554994"; + }, 1500) + setTimeout(() => { + document.getElementById("op4").style.color = "black"; + setnewQuestion() + }, 1500) + } + +}) + + diff --git a/projects/QuizAPP-main/style.css b/projects/QuizAPP-main/style.css new file mode 100644 index 0000000..24e7a7f --- /dev/null +++ b/projects/QuizAPP-main/style.css @@ -0,0 +1,147 @@ +.container { + + position: absolute; + top: 3cm; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-size: x-large; + width: 15cm; + height: 8cm; + border-radius: 5px; + background-color: wheat; + left: 29%; + box-shadow: 0 0 10px 10px; +} + +.correct { + background-color: green; +} + +.wrong { + background-color: red; + +} + +.neutral { + background-color: #554994; +} + +.question { + /* text-align: center; */ + position: absolute; + bottom: 3cm; + left: 2cm; + /* font-family: Verdana, Geneva, Tahoma, sans-serif; */ +} + +.q { + position: relative; + /* border: 5px solid #FFFF00; */ + /* display: flex; */ + /* justify-content: center; */ + /* width: 10cm; */ + /* margin-right: 9cm ; */ + margin-left: -70px; + bottom: -6px; + + +} + +.option { + position: relative; + + bottom: -2cm; + display: grid; + /* grid-template-columns: repeat(2, auto); */ + gap: 10px; + right: 1.6cm; + top: 1cm; + width: fit-content; + height: fit-content; + padding: 0px 10px; + +} + +.btn { + padding: 0; + +} + +.btn:hover { + background-color: darkgray; +} + +.btn.correct { + --hue: var(--hue-correct) background-color: greenyellow; +} + +.btn.wrong { + --hue: var(--hue-correct) background-color: red; +} + +.controls { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + bottom: 5%; + left: 39%; + gap: 20px; + +} + +.cbtn { + border-radius: 15px; + font-size: 1.5rem; + padding: 5px 5px; +} + +.cbtn:hover { + background-color: darkgray; + + +} + +.hide { + display: none; +} + +/* .started{ + display: none; +} */ + + +.started { + position: relative; + bottom: 3cm; + /* background-color: red; */ + left: 1cm; + +} + +body{ + background-color: purple; +} + + + + +/* #P{ + position: relative; + left:13cm ; + font-size: x-large; + bottom: 4cm; +} */ + +#P{ + position: relative; + left: 0cm ; + bottom: -1cm ; + font-family:fantasy + +} + +.middle{ + position: relative; + top: -2.5cm ; + +} \ No newline at end of file