Skip to content
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

Jump to bottom

Added quiz section #341

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Added quiz section #341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9724457
Added quiz section
Muskan-creator Apr 4, 2021
47f2126
Merge branch 'master' of https://github.com/Muskan-creator/Algo-Phant…
Muskan-creator May 10, 2021
2d02067
Added quiz section
Muskan-creator May 16, 2021
c1b297f
Merge branch 'master' into quizsection
Muskan-creator May 16, 2021
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
37 changes: 37 additions & 0 deletions Quiz.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz page</title>
harikesh409 marked this conversation as resolved.
Show resolved Hide resolved
<link rel="stylesheet" href="css/quiz.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
<link rel="apple-touch-icon" sizes="180x180" href="favicon_package\apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_package\favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_package\favicon-16x16.png">
<link rel="manifest" href="favicon_package\site.webmanifest">
<link rel="mask-icon" href="favicon_package\safari-pinned-tab.svg" color="#3caea3">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="heading">Welcome to DSA QUIZ !</h1>

<h2 class="heading_2">Test your knowledge</h2>
</div>
</div>
<div class="container">
<div class="row card">
<h2 id="test_status">Are you ready to take the quiz?</h2>
<div id="test"></div>
<button id="btn" type="button" onclick="startQuiz()">Start Quiz</button>
</div>

<script src="js/quiz.js"></script>

</body>
</html>
62 changes: 62 additions & 0 deletions css/quiz.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
@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;
background-color: #000;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't use black as background color use something which matches our color scheme.

font-family: 'Work Sans', sans-serif;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using a new font again use the font that is already being used in home page.

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{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can include bootstrap and use those styles as in our website we are using bootstrap.

position: relative;
height: 200px;
margin-top: 30px;
}
2 changes: 1 addition & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,7 +369,7 @@ hr {
border-spacing: 0;
width: 90%;
border: 1px solid #ddd;
align: centre;
text-align: centre;
}

.skills-section th:hover {
Expand Down
9 changes: 7 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<!doctype html>

<!doctype html>
<html lang="en">

<head>
Expand Down Expand Up @@ -380,7 +381,10 @@ <h5 class="font-weight-bold text-white mb-lg-4 pb-2 margin-top-mobile">Features<

<ul>
<a class="text-white mb-lg-3" href="https://www.codechef.com/ide" target="_blank">Code Editor</a><br>
<a class="text-white mb-lg-3" href="https://www.geeksforgeeks.org/data-structure-gq/" target="_blank">Quizzes</a><br>

<a class="text-white mb-lg-3" href="Quiz.html" target="_blank">Quizzes</a><br>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add this link in the navbar more section also.

<a class="text-white mb-lg-3" href="https://github.com/Algo-Phantoms/Algo-Tree" target="_blank">DSA Guidance</a><br>

<a class="text-white mb-lg-3" href="https://dare2compete.com/" target="_blank">Opportunities</a><br>


Expand Down Expand Up @@ -418,6 +422,7 @@ <h5 class="font-weight-bold text-white mb-lg-4 pb-2 margin-top-mobile">Follow Us
<!-- Back to top button -->
<button id="back-to-top-btn" style="background:#3caea3;"><i class=" fas fa-angle-double-up"></i></button>
<script src="js/index.js"></script>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<script src="js/typing.js"></script>
</body>
Expand Down
84 changes: 84 additions & 0 deletions js/quiz.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@

function startQuiz() {
document.getElementById('btn').style.visibility = "hidden";
return displayQuestion();
}

var pos = 0, test, test_status, question, option, options, opA, opB, opC, opD,result, score = 0;
var questions = [
[" In order traversal of binary search tree will produce",
"unsorted list",
"reverse of input",
"sorted list",
"none of the above",
"C"],
["A circular linked list can be used for",
"Stack",
"Queue",
"Both Stack & Queue",
"Neither Stack or Queue",
"C"],
["Minimum number of queues required for priority queue implementation?",
" 5"," 4"," 3","2","D"],
["Time required to merge two sorted lists of size m and n, is",
"Ο(m | n)","Ο(m + n)","Ο(m log n)","Ο(n log m)","B"],
[ "A balance factor in AVL tree is used to check",
"what rotation to make.",
"if all child nodes are at same level.",
"when the last rotation occured.",
"if the tree is unbalanced.","D"],
["The number of items used by the dynamic array contents is its ",
"Physical size",
"Capacity",
"Logical size",
"Random size","C"],
["How will you implement dynamic arrays in Java?",
" Set",
" Map",
" HashMap",
"List","D"]
];
function $(arg) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Include jquery and use it.

return document.getElementById(arg);
}

function displayQuestion() {
test = $("test");
if (pos >= questions.length) {
test.innerHTML = "<h2>You got " + score + " of " + questions.length + " questions correct!</h2>";
$("test_status").innerHTML = "Test Completed.";
pos = 0;
score = 0;
return false;
}

$("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length;
question = questions[pos][0];
opA = questions[pos][1];
opB = questions[pos][2];
opC = questions[pos][3];
opD = questions[pos][4];

test.innerHTML = "<h3>Que" +(pos+1)+". "+question + "</h3>";
test.innerHTML += "<h4><input type='radio' name='options' value='A'>" + opA + "</h4>";
test.innerHTML += "<h4><input type='radio' name='options' value='B'>" + opB + "</h4>";
test.innerHTML += "<h4><input type='radio' name='options' value='C'>" + opC + "</h4>";
test.innerHTML += "<h4><input type='radio' name='options' value='D'>" + opD + "</h4>";
test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}

function checkAnswer() {

var options = document.getElementsByName("options");

for (var i = 0; i < options.length; i++) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The whole loop can be simplified using jquery.

Ref: https://api.jquery.com/checked-selector/

if (options[i].checked) {
option = options[i].value;
}
}
if (option == questions[pos][5]) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Declare the variable option in the checkAnswer() or else the option is declared in global scope and if the user didn't give an option and click submit then the previous answer will be store here.

score++;
}
pos++;
displayQuestion();}