diff --git a/Pages/Quizes/index.html b/Pages/Quizes/index.html index f2e670d62..770ce1852 100644 --- a/Pages/Quizes/index.html +++ b/Pages/Quizes/index.html @@ -40,7 +40,7 @@

Quizes

- Quizes + Simulation
@@ -127,6 +127,18 @@

3D Geometry

+
+
+
Course
+

Chemistry

+
+
+
Test
+

Chemical Bonding

+ +
+ +
diff --git a/Pages/Quizes/tests/button-8/assets/asset 1.png b/Pages/Quizes/tests/button-8/assets/asset 1.png new file mode 100644 index 000000000..c5385e378 Binary files /dev/null and b/Pages/Quizes/tests/button-8/assets/asset 1.png differ diff --git a/Pages/Quizes/tests/button-8/assets/asset 41.png b/Pages/Quizes/tests/button-8/assets/asset 41.png new file mode 100644 index 000000000..961365f32 Binary files /dev/null and b/Pages/Quizes/tests/button-8/assets/asset 41.png differ diff --git a/Pages/Quizes/tests/button-8/assets/asset 42.svg b/Pages/Quizes/tests/button-8/assets/asset 42.svg new file mode 100644 index 000000000..3a87b9f08 --- /dev/null +++ b/Pages/Quizes/tests/button-8/assets/asset 42.svg @@ -0,0 +1,1037 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Pages/Quizes/tests/button-8/img/Atomic Structure.png b/Pages/Quizes/tests/button-8/img/Atomic Structure.png new file mode 100644 index 000000000..f4939df6f Binary files /dev/null and b/Pages/Quizes/tests/button-8/img/Atomic Structure.png differ diff --git a/Pages/Quizes/tests/button-8/img/Bond Length and Strength.png b/Pages/Quizes/tests/button-8/img/Bond Length and Strength.png new file mode 100644 index 000000000..9a37a7119 Binary files /dev/null and b/Pages/Quizes/tests/button-8/img/Bond Length and Strength.png differ diff --git a/Pages/Quizes/tests/button-8/img/Formal Charge.png b/Pages/Quizes/tests/button-8/img/Formal Charge.png new file mode 100644 index 000000000..d6206a4cb Binary files /dev/null and b/Pages/Quizes/tests/button-8/img/Formal Charge.png differ diff --git a/Pages/Quizes/tests/button-8/img/Hybridization.png b/Pages/Quizes/tests/button-8/img/Hybridization.png new file mode 100644 index 000000000..6acfa6b6a Binary files /dev/null and b/Pages/Quizes/tests/button-8/img/Hybridization.png differ diff --git a/Pages/Quizes/tests/button-8/img/Ionic Bonds.png b/Pages/Quizes/tests/button-8/img/Ionic Bonds.png new file mode 100644 index 000000000..b049dc8ed Binary files /dev/null and b/Pages/Quizes/tests/button-8/img/Ionic Bonds.png differ diff --git a/Pages/Quizes/tests/button-8/img/Molecular Structure.png b/Pages/Quizes/tests/button-8/img/Molecular Structure.png new file mode 100644 index 000000000..38f5c0636 Binary files /dev/null and b/Pages/Quizes/tests/button-8/img/Molecular Structure.png differ diff --git a/Pages/Quizes/tests/button-8/img/Resonance.png b/Pages/Quizes/tests/button-8/img/Resonance.png new file mode 100644 index 000000000..ce608dd23 Binary files /dev/null and b/Pages/Quizes/tests/button-8/img/Resonance.png differ diff --git a/Pages/Quizes/tests/button-8/img/Types of Bonds (2).png b/Pages/Quizes/tests/button-8/img/Types of Bonds (2).png new file mode 100644 index 000000000..fdd06122a Binary files /dev/null and b/Pages/Quizes/tests/button-8/img/Types of Bonds (2).png differ diff --git a/Pages/Quizes/tests/button-8/img/Types of Bonds.png b/Pages/Quizes/tests/button-8/img/Types of Bonds.png new file mode 100644 index 000000000..d80b9139f Binary files /dev/null and b/Pages/Quizes/tests/button-8/img/Types of Bonds.png differ diff --git a/Pages/Quizes/tests/button-8/img/VSEPR Theory.png b/Pages/Quizes/tests/button-8/img/VSEPR Theory.png new file mode 100644 index 000000000..b5b2160a1 Binary files /dev/null and b/Pages/Quizes/tests/button-8/img/VSEPR Theory.png differ diff --git a/Pages/Quizes/tests/button-8/index.html b/Pages/Quizes/tests/button-8/index.html new file mode 100644 index 000000000..054588d47 --- /dev/null +++ b/Pages/Quizes/tests/button-8/index.html @@ -0,0 +1,128 @@ + + + + + + + Virtuo Learn + + + + + + + + + +
+
+

Chemical Bonding

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

Question is loading...

+ +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • + +
+
+ +
+
+
+ +
+ +
+
+ +
+ + + + + +
+ +
+ +
+ +
+ +
+
+ +
+
+ + + + + + + + + + diff --git a/Pages/Quizes/tests/button-8/media-queries.css b/Pages/Quizes/tests/button-8/media-queries.css new file mode 100644 index 000000000..8190bdc34 --- /dev/null +++ b/Pages/Quizes/tests/button-8/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-8/script.js b/Pages/Quizes/tests/button-8/script.js new file mode 100644 index 000000000..28d4d0b13 --- /dev/null +++ b/Pages/Quizes/tests/button-8/script.js @@ -0,0 +1,203 @@ +const quizData = [ + { + question: "Which bond is formed between two nonmetals?", + a: "Ionic", + b: "Covalent", + c: "Metallic", + d: "Polar", + correct: "b", + topic: "Types of Bonds", + difficulty: "Easy", + }, + { + question: "Which type of bond is characterized by unequal sharing of electrons?", + a: "Ionic", + b: "Covalent", + c: "Polar Covalent", + d: "Metallic", + correct: "c", + topic: "Types of Bonds", + difficulty: "Medium", + }, + + { + question: "What is the bond angle in a molecule with a trigonal bipyramidal electron geometry?", + a: "90°", + b: "109.5°", + c: " 120°", + d: "180°", + correct: "c", + topic: "Molecular Geometry", + difficulty: "Hard", + }, + { + question: " What is the VSEPR theory used to predict?", + a: "Molecular Geometry", + b: "Electron Configuration", + c: "Hybridization", + d: "Ionization Energy", + correct: "a", + topic: "VSEPR Theory", + difficulty: "Medium", + }, + { + question: "What is the electron configuration of oxygen?", + a: " 1s² 2s² 2p⁴", + b: " 1s² 2s² 2p²", + c: " 1s² 2s¹", + d: "1s² 2s² 2p⁶", + correct: "a", + topic: "Atomic Structure", + difficulty: "Easy", + }, + { + question: "Explain the concept of resonance in chemical bonding.", + a: "The transfer of electrons between atoms", + b: "The average of multiple Lewis structures", + c: "The formation of ionic bonds", + d: "The sharing of electrons in covalent bonds", + correct: "b", + topic: "Resonance", + difficulty: "Hard", + }, + { + question: "What is the relationship between bond length and bond strength?", + a: " Inversely proportional", + b: " Directly proportional", + c: "CarbNo relationshipon", + d: "Depends on the atoms involved", + correct: "a", + topic: "Bond Length and Strength", + difficulty: "Hard", + }, + { + question: "What is the charge of a chloride ion?", + a: "+1", + b: "-1", + c: "0", + d: "+2", + correct: "b", + topic: " Ionic Bonds", + difficulty: "Easy", + }, + { + question: "What is the significance of the term 'sp³d²' in hybridization?", + a: "Number of lone pairs", + b: " Number of sigma bonds", + c: "Number of pi bonds", + d: "Number of orbitals involved in hybridization", + correct: "d", + topic: "Hybridization", + difficulty: "Hard", + }, + { + question: "What is the formal charge on the nitrogen atom in the ammonium ion (NH₄⁺)?", + a: "-1", + b: "0", + c: "+1", + d: "+2", + correct: "c", + topic: "Formal Charge", + difficulty: "Medium", + }, + ]; + + 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-8/style.css b/Pages/Quizes/tests/button-8/style.css new file mode 100644 index 000000000..744de12ac --- /dev/null +++ b/Pages/Quizes/tests/button-8/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; +}