From 97244574b87745e6ded0433f08c919d3fc64a6d5 Mon Sep 17 00:00:00 2001 From: muskan <59757988+Muskan-creator@users.noreply.github.com> Date: Sun, 4 Apr 2021 22:05:59 +0530 Subject: [PATCH 1/2] Added quiz section --- Quiz.html | 28 +++++++++++++++++ css/quiz.css | 77 ++++++++++++++++++++++++++++++++++++++++++++++ css/style.css | 2 +- index.html | 2 +- js/quiz.js | 84 +++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 191 insertions(+), 2 deletions(-) create mode 100644 Quiz.html create mode 100644 css/quiz.css create mode 100644 js/quiz.js diff --git a/Quiz.html b/Quiz.html new file mode 100644 index 0000000..d8bdd67 --- /dev/null +++ b/Quiz.html @@ -0,0 +1,28 @@ + + + + + + + Quiz page + + + +
+
+

Welcome to DSA QUIZ !

+ +

Test your knowledge

+
+
+
+
+

Are you ready to take the quiz?

+
+ +
+ + + + + \ No newline at end of file diff --git a/css/quiz.css b/css/quiz.css new file mode 100644 index 0000000..47b4ef7 --- /dev/null +++ b/css/quiz.css @@ -0,0 +1,77 @@ +@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600); + + +body{ + font-size: 20px; + background-color: #000; + font-family: 'Work Sans', sans-serif; + color: #fff; + + text-align: center; + +} +h1{ + font-weight: 700; + margin: 0px; + padding: 1rem; + font-size: 3rem; + color: #fff; + background-color: #134041; +} +.heading_2{ + font-size: 1.5rem; +} + +h3{ + text-align: left; + color:#000; + font-size: 30px; + +} +#test{ + + background-color: #f9f9fa; + margin:1rem 10rem; + padding:3px 10px 3px 100px; + color: #000; + +} + + + h4{ + text-align: left; + padding: 10px 0px; + width:500px; + background-color: #f1f1f1; + box-shadow: 0 8px 6px -6px black; + + + + border-radius: 15px; + } + +button{ + font-family: 'Work Sans', sans-serif; + font-size: 20px; + font-weight: 700; + background-color: #49b1ad; + color: #fff; + border: 0px; + border-radius: 3px; + padding: 20px; + cursor: pointer; + margin-bottom: 20px; +} +button:hover{ + background-color: #3cae3c; +} + + + + + +.container{ + position: relative; + height: 200px; + margin-top: 30px; +} diff --git a/css/style.css b/css/style.css index 0fe1b1b..11dc9a4 100644 --- a/css/style.css +++ b/css/style.css @@ -305,7 +305,7 @@ hr { border-spacing: 0; width: 90%; border: 1px solid #ddd; - align: centre; + text-align: centre; } .skills-section th:hover { diff --git a/index.html b/index.html index 79630a9..ff765aa 100644 --- a/index.html +++ b/index.html @@ -394,7 +394,7 @@
Useful Li
Features
-
+

Are you ready to take the quiz?

diff --git a/css/quiz.css b/css/quiz.css index 47b4ef7..91d7e0f 100644 --- a/css/quiz.css +++ b/css/quiz.css @@ -1,5 +1,5 @@ -@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600); - +@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;0,900;1,900&display=swap"); +@import url(https://weloveiconfonts.com/api/?family=entypo); body{ font-size: 20px; @@ -25,29 +25,19 @@ h1{ h3{ text-align: left; color:#000; - font-size: 30px; - + font-size: 30px; } #test{ - - background-color: #f9f9fa; + background-color: #f9f9fa; margin:1rem 10rem; padding:3px 10px 3px 100px; color: #000; - } - - - h4{ - text-align: left; - padding: 10px 0px; - width:500px; - background-color: #f1f1f1; - box-shadow: 0 8px 6px -6px black; - - - - border-radius: 15px; + h4{ + text-align: left;padding: 10px 0px;width:500px; + background-color: #f1f1f1; + box-shadow: 0 8px 6px -6px black; + border-radius: 15px; } button{ @@ -65,11 +55,6 @@ button{ button:hover{ background-color: #3cae3c; } - - - - - .container{ position: relative; height: 200px; diff --git a/index.html b/index.html index ff765aa..d556498 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -426,6 +426,7 @@
Follow Us + diff --git a/js/quiz.js b/js/quiz.js index f4bcedd..192f442 100644 --- a/js/quiz.js +++ b/js/quiz.js @@ -59,8 +59,6 @@ function displayQuestion() { opC = questions[pos][3]; opD = questions[pos][4]; - - test.innerHTML = "

Que" +(pos+1)+". "+question + "

"; test.innerHTML += "

" + opA + "

"; test.innerHTML += "

" + opB + "

"; @@ -70,7 +68,9 @@ function displayQuestion() { } function checkAnswer() { - options = document.getElementsByName("options"); + + var options = document.getElementsByName("options"); + for (var i = 0; i < options.length; i++) { if (options[i].checked) { option = options[i].value;