diff --git a/Pages/Quizes/index.html b/Pages/Quizes/index.html index 39157dbb5..02c2006fb 100644 --- a/Pages/Quizes/index.html +++ b/Pages/Quizes/index.html @@ -22,7 +22,7 @@
  • About Us
  • Simulations
  • 3D Visualisations
    • -
  • Quizzes
    • +
  • Quizes
  • Videos
  • Doubt Engine
    • @@ -38,7 +38,7 @@
    -

    Quizzes

    +

    Quizes

    Simulation
    @@ -102,6 +102,17 @@

    Thermodynamics

    +
    +
    +
    Course
    +

    Chemistry

    +
    +
    +
    Test
    +

    Periodic Table

    + +
    +
    @@ -132,4 +143,4 @@

    Thermodynamics

    - \ No newline at end of file + diff --git a/Pages/Quizes/tests/button-6/assets/asset 1.png b/Pages/Quizes/tests/button-6/assets/asset 1.png new file mode 100644 index 000000000..c5385e378 Binary files /dev/null and b/Pages/Quizes/tests/button-6/assets/asset 1.png differ diff --git a/Pages/Quizes/tests/button-6/assets/asset 41.png b/Pages/Quizes/tests/button-6/assets/asset 41.png new file mode 100644 index 000000000..961365f32 Binary files /dev/null and b/Pages/Quizes/tests/button-6/assets/asset 41.png differ diff --git a/Pages/Quizes/tests/button-6/assets/asset 42.svg b/Pages/Quizes/tests/button-6/assets/asset 42.svg new file mode 100644 index 000000000..3a87b9f08 --- /dev/null +++ b/Pages/Quizes/tests/button-6/assets/asset 42.svg @@ -0,0 +1,1037 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Pages/Quizes/tests/button-6/img/Atom.png b/Pages/Quizes/tests/button-6/img/Atom.png new file mode 100644 index 000000000..d80b9139f Binary files /dev/null and b/Pages/Quizes/tests/button-6/img/Atom.png differ diff --git a/Pages/Quizes/tests/button-6/img/Atoms.png b/Pages/Quizes/tests/button-6/img/Atoms.png new file mode 100644 index 000000000..f4939df6f Binary files /dev/null and b/Pages/Quizes/tests/button-6/img/Atoms.png differ diff --git a/Pages/Quizes/tests/button-6/img/Group 14.png b/Pages/Quizes/tests/button-6/img/Group 14.png new file mode 100644 index 000000000..b049dc8ed Binary files /dev/null and b/Pages/Quizes/tests/button-6/img/Group 14.png differ diff --git a/Pages/Quizes/tests/button-6/img/Group 16.png b/Pages/Quizes/tests/button-6/img/Group 16.png new file mode 100644 index 000000000..fdd06122a Binary files /dev/null and b/Pages/Quizes/tests/button-6/img/Group 16.png differ diff --git a/Pages/Quizes/tests/button-6/img/Halogens.png b/Pages/Quizes/tests/button-6/img/Halogens.png new file mode 100644 index 000000000..b5b2160a1 Binary files /dev/null and b/Pages/Quizes/tests/button-6/img/Halogens.png differ diff --git a/Pages/Quizes/tests/button-6/img/Inert Elements.png b/Pages/Quizes/tests/button-6/img/Inert Elements.png new file mode 100644 index 000000000..d6206a4cb Binary files /dev/null and b/Pages/Quizes/tests/button-6/img/Inert Elements.png differ diff --git a/Pages/Quizes/tests/button-6/img/Molecular Structure.png b/Pages/Quizes/tests/button-6/img/Molecular Structure.png new file mode 100644 index 000000000..38f5c0636 Binary files /dev/null and b/Pages/Quizes/tests/button-6/img/Molecular Structure.png differ diff --git a/Pages/Quizes/tests/button-6/img/Nitrogen Oxides.png b/Pages/Quizes/tests/button-6/img/Nitrogen Oxides.png new file mode 100644 index 000000000..ce608dd23 Binary files /dev/null and b/Pages/Quizes/tests/button-6/img/Nitrogen Oxides.png differ diff --git a/Pages/Quizes/tests/button-6/img/Noble Gases.png b/Pages/Quizes/tests/button-6/img/Noble Gases.png new file mode 100644 index 000000000..9a37a7119 Binary files /dev/null and b/Pages/Quizes/tests/button-6/img/Noble Gases.png differ diff --git a/Pages/Quizes/tests/button-6/img/Periodic Table.png b/Pages/Quizes/tests/button-6/img/Periodic Table.png new file mode 100644 index 000000000..6acfa6b6a Binary files /dev/null and b/Pages/Quizes/tests/button-6/img/Periodic Table.png differ diff --git a/Pages/Quizes/tests/button-6/index.html b/Pages/Quizes/tests/button-6/index.html new file mode 100644 index 000000000..bef4f7d92 --- /dev/null +++ b/Pages/Quizes/tests/button-6/index.html @@ -0,0 +1,127 @@ + + + + + + + Virtuo Learn + + + + + + + + + +
    +
    +

    Periodic Table & Periodicity

    +
    +
    + + + +
    + +
    + +
    +
    +

    Question is loading...

    + +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • + +
    +
    + +
    +
    +
    + +
    + +
    +
    + +
    + + + + + +
    + +
    + +
    + +
    + +
    +
    + +
    +
    + + + + + + + + + + \ No newline at end of file diff --git a/Pages/Quizes/tests/button-6/media-queries.css b/Pages/Quizes/tests/button-6/media-queries.css new file mode 100644 index 000000000..8190bdc34 --- /dev/null +++ b/Pages/Quizes/tests/button-6/media-queries.css @@ -0,0 +1,98 @@ +@media screen and (max-width: 1030px) { + + h3 { + font-size: 1.2rem; + } + + .main-nav { + overflow: initial; + } + + .hamburger{ + display: block; + } + + .hamburger.active .bar:nth-child(2){ + opacity: 0; + } + .hamburger.active .bar:nth-child(1){ + transform: translateY(8px) rotate(45deg); + } + .hamburger.active .bar:nth-child(3){ + transform: translateY(-8px) rotate(-45deg); + } + + .nav-menu{ + position: absolute; + top: -100%; + left: 0; + gap: 0; + flex-direction: column; + width: 100%; + text-align: center; + transition: 0.3s; + z-index: 1; + /* background-color: aqua; */ + /* max-height: 10vh; */ + margin: 0; + padding: 0; + + background: rgba(236, 235, 255, 0.2); + /* border-radius: 16px; */ + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(3.3px); + -webkit-backdrop-filter: blur(3.3px); + border: 1px solid rgba(236, 235, 255, 0.3); + + } + .hover-link{ + margin: 16px 0; + } + .nav-menu.active{ + top: 13%; + } + + .course { + flex-direction: column; + height: 60vh; + } + .course-preview { + width: 70vw; + } + .course-info { + width: 100%; + height: 200%; + } + .card-btn { + bottom: 5vh; + right: 5vw; + } +} + +@media screen and (max-width: 479px) { + :root { + --padding-inline-section: 10px; + } + + h1 { + font-size: 2rem; + } + + h2 { + font-size: 1.5rem; + } + + h3 { + font-size: 1.5rem; + } + + p { + font-size: 1rem; + } + + .center{ + position: relative; + left: 0vw; + } + +} diff --git a/Pages/Quizes/tests/button-6/script.js b/Pages/Quizes/tests/button-6/script.js new file mode 100644 index 000000000..6a9c5c896 --- /dev/null +++ b/Pages/Quizes/tests/button-6/script.js @@ -0,0 +1,203 @@ +const quizData = [ + { + question: "How many electrons does a neutral nitrogen atom have?", + a: "5", + b: "6", + c: "7", + d: "8", + correct: "c", + topic: "Atom", + difficulty: "Easy", + }, + { + question: "Which group in the periodic table contains noble gases?", + a: "Group 1", + b: "Group 2", + c: "Group 17", + d: "Group 18", + correct: "d", + topic: "Noble Gases", + difficulty: "Easy", + }, + + { + question: " What is the main energy level (shell) for the outermost electrons in Group 16 elements?", + a: "n=1", + b: "n=2", + c: "n=3", + d: "n=4", + correct: "d", + topic: "Periodic Table", + difficulty: "Medium", + }, + { + question: " Which element is at the center of a molecule with a trigonal bipyramidal molecular geometry?", + a: "Carbon", + b: "Nitrogen", + c: "Phosphorus", + d: "Sulphur", + correct: "c", + topic: "Periodic Table", + difficulty: "Hard", + }, + { + question: "What is the charge of a chloride ion (Cl-)?", + a: "-1", + b: "+1", + c: "0", + d: "-2", + correct: "a", + topic: "Halogens", + difficulty: "Easy", + }, + { + question: "What is the common oxidation state of oxygen in compounds?", + a: "-1", + b: "0", + c: "+1", + d: "-2", + correct: "d", + topic: "Group 16", + difficulty: "Medium", + }, + { + question: "Which of the following elements has the highest atomic radius?", + a: "Oxygen", + b: "Nitrogen", + c: "Carbon", + d: "Fluorine", + correct: "c", + topic: "Group 14", + difficulty: "Hard", + }, + { + question: "What is the trend of atomic radius as you move from left to right across a period in the periodic table?", + a: "Increases", + b: "Decreases", + c: "Remains Constant", + d: "No Pattern", + correct: "b", + topic: "Atoms", + difficulty: "Medium", + }, + { + question: "Which ion is isoelectronic with argon?", + a: "Cl-", + b: "K+", + c: "Ca2+", + d: "S2-", + correct: "c", + topic: "Inert Elements", + difficulty: "Hard", + }, + { + question: "In which period is the element chlorine located?", + a: "1", + b: "2", + c: "3", + d: "4", + correct: "c", + topic: "Periodic Table", + difficulty: "Easy", + }, + ]; + + const quiz = document.getElementById("quiz"); + const answerElements = document.querySelectorAll(".answer"); + const questionElement = 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 submitButton = document.getElementById("submit"); + const difficulty = document.getElementById("difficulty"); + + let currentQuiz = 0; + let score = 0; + const weak_topics=[]; + + const deselectAnswers = () => { + answerElements.forEach((answer) => (answer.checked = false)); + }; + + const getSelected = () => { + let answer; + answerElements.forEach((answerElement) => { + if (answerElement.checked) answer = answerElement.id; + }); + return answer; + }; + + const loadQuiz = () => { + deselectAnswers(); + const currentQuizData = quizData[currentQuiz]; + questionElement.innerText = currentQuizData.question; + a_text.innerText = currentQuizData.a; + b_text.innerText = currentQuizData.b; + c_text.innerText = currentQuizData.c; + d_text.innerText = currentQuizData.d; + difficulty.innerText = currentQuizData.difficulty; + }; + + loadQuiz(); + + submitButton.addEventListener("click", () => { + const answer = getSelected(); + if (answer) { + if (answer === quizData[currentQuiz].correct) { + score++; + currentQuiz++; + } + else{ + weak_topics.push(quizData[currentQuiz].topic); + currentQuiz++; + } + if (currentQuiz < quizData.length) loadQuiz(); + else { + quiz.innerHTML = ` +

    You answered ${score}/${quizData.length} questions correctly

    + + ` + + var temp; + for (i = 0; i < weak_topics.length; i++) { + if(i===0){ + // this is for recommended videos heading + temp = document.createElement('h3'); + temp.className = 'Recommended-Videos-Title'; + temp.innerHTML = "Recommended Videos "; + document.getElementsByClassName('recommendations')[0].appendChild(temp); + } + // this is for recommended videos + var image = document.createElement("img"); + image.setAttribute("src", "img/" + weak_topics[i] + ".png"); + temp.className = 'thumbnail'; + document.querySelector(".recommendation-thumbnails").appendChild(image); + } + + for (i = 0; i < weak_topics.length; i++) { + if(i===0){ + // this is for weak topics heading + temp = document.createElement('div'); + temp.className = 'heading'; + temp.innerHTML = "Weak Topics:" ; + document.getElementsByClassName('weak')[0].appendChild(temp); + } + // this is for weak topics + temp = document.createElement('div'); + temp.className = 'topic'; + temp.innerHTML = weak_topics[i]; + document.getElementsByClassName('weak')[0].appendChild(temp); + } + + + } + } + if(currentQuiz>=quizData.length){ + temp = document.createElement('button'); + temp.className = 'solution-button'; + temp.innerHTML = "Solutions" ; + document.getElementsByClassName('solution-div')[0].appendChild(temp); + } + + }); \ No newline at end of file diff --git a/Pages/Quizes/tests/button-6/style.css b/Pages/Quizes/tests/button-6/style.css new file mode 100644 index 000000000..744de12ac --- /dev/null +++ b/Pages/Quizes/tests/button-6/style.css @@ -0,0 +1,355 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Roboto:wght@400;700&display=swap'); + +/* resets */ + + + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; + box-sizing: border-box; +} + +:root { + --primary-text-color: #183b56; + --secondary-text-color: #577592; + --accent-color: #2294ed; + --accent-color-dark: #1d69a3; + --padding-inline-section: 20px; +} + +body { + font-family: 'Poppins', sans-serif; + color: var(--primary-text-color); + overflow-x: hidden; +} + +h1 { + font-size: 3rem; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.5rem; +} + +p { + font-family: 'Roboto', sans-serif; + font-size: 1.25rem; + color: var(--secondary-text-color); + line-height: 1.8rem; +} + +a { + text-decoration: none; + display: inline-block; +} + +ul { + list-style: none; +} + +/* utility classes */ + +.small-bold-text { + font-size: 1rem; + font-weight: 700; +} + +.container { + max-width: 1180px; + margin-inline: auto; + padding-inline: var(--padding-inline-section); + overflow: hidden; +} + +.flex { + display: flex; + align-items: center; +} + +.hover-link { + color: var(--primary-text-color); + transition: 0.2s ease-out; +} + +.hover-link:hover { + color: var(--accent-color); +} + +.primary-button { + background-color: var(--accent-color); + border-radius: 6px; + font-weight: 700; + color: white !important; + padding: 12px 24px; + box-shadow: 0 0 2px var(--secondary-text-color); + transition: 0.2s ease-out; + text-align: center; +} + +.primary-button:hover { + background-color: var(--accent-color-dark); +} + +.secondary-button { + border: 0.5px solid var(--secondary-text-color); + border-radius: 6px; + font-weight: 700; + color: var(--primary-text-color) !important; + padding: 12px 24px; + transition: 0.2s ease-out; +} + +.secondary-button:hover { + border-color: var(--accent-color); + color: var(--accent-color) !important; +} + +/* nav bar */ + +.main-nav { + margin-top: 20px; + justify-content: space-between; +} + +.company-logo img { + width: 200px; +} + +.nav-links { + flex-basis: 730px; +} + +.nav-menu{ + display: flex; + align-items: center; +} + +.nav-links ul { + justify-content: end; + gap: 40px; +} + +.nav-toggle { + display: none; +} + +.hamburger{ + display: none; + cursor: pointer; +} + +.bar{ + display: block; + width: 25px; + height: 3px; + margin: 5px auto; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + background-color: black; +} + +/* header section */ +.header h1{ + text-align: center; + margin-top: 4vh; +} + +.header img{ + display: block; + margin: 0 auto; + width: 35vw; + } + +/* quiz section */ + + +.quiz-wrapper{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 10vh; + } + + .quiz-container { + background-color: #F0F1FF; + border-radius: 10px; + box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1); + width: 500px; + max-width: 95vw; + overflow: hidden; + } + + .quiz-header { + padding: 1rem; + } + + h2 { + padding: 1rem; + text-align: center; + margin: 0; + } + + .quiz-ul { + list-style-type: none; + padding: 0; + } + + .quiz-ul li { + font-size: 1.2rem; + margin: 1rem 0; + } + + .quiz-ul li label { + cursor: pointer; + } + + button { + background-color: #242969 ; + color: #fff; + border: none; + display: block; + width: 100%; + cursor: pointer; + font-size: 1.1rem; + font-family: inherit; + padding: 1.1rem; + } + + button:hover { + background-color: #732d91; + } + + button:focus { + outline: none; + background-color: #5e3370; + } + + .weak{ + display: flex; + flex-wrap: wrap; + margin: 0 auto; + } + + .topic{ + background: rgba(176, 189, 255, 0.22); + border-radius: 16px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(3.1px); + -webkit-backdrop-filter: blur(3.1px); + border: 1px solid rgba(176, 189, 255, 0.35); + margin-top: 10px; + margin-left: 10px; + padding-left: 8px; + padding-right: 8px; + } + + .heading{ + margin-top: 10px; + margin-left: 10px; + } + + .result{ + display: flex; + } + + #difficulty{ + text-align: center; + font-weight: bold; + } + + .solution-div{ + max-width: 10vw; + min-width: 80px; + margin: 0 auto; + margin-top: 4vh; + } + + .solution-button { + display: flex; + flex-direction: column; + align-items: center; + padding: 6px 14px; + font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif; + border-radius: 6px; + border: none; + + color: #fff; + background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%); + background-origin: border-box; + box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2); + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + } + + .solution-button:focus { + box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5); + outline: 0; + } + +/* recommendations */ + +.Recommended-Videos-Title{ + position: relative; + left: 6vw; + margin-top: 2vh; +} + +.recommendation-thumbnails{ + display: flex; + flex-wrap: wrap; +} + +.recommendation-thumbnails img{ + width: 420px; + height: auto; +} + +.recommendations h3{ + margin-left: 1.5vw; +} +/* footer */ + +footer{ + + bottom: 0; + left: 0; + right: 0; + background: #111; + height: auto; + width: 100vw; + padding-top: 40px; + background-color: #ebf2fa; + margin-top: 5vh; +} + +.footer-content{ + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; +} + +.footer-logo{ + font-size: 2.1rem; + font-weight: 500; + text-transform: capitalize; + line-height: 3rem; +} + +.footer-content p{ + max-width: 500px; + margin: 10px auto; + line-height: 28px; + font-size: 14px; + color: #cacdd2; +}