Skip to content

Commit

Permalink
Merge pull request #2417 from SrijaVuppala295/jse
Browse files Browse the repository at this point in the history 
Created a JS Easy Quiz challenge !!
  • Loading branch information
@iamrahulmahato
iamrahulmahato authored Nov 10, 2024
2 parents f468def + ebd17ea commit c3803b9
Show file tree
Hide file tree
Showing 2 changed files with 206 additions and 3 deletions.
15 changes: 12 additions & 3 deletions challenges/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,17 +175,17 @@ <h2>CSS Ultimate</h2>
<div class="quiz-card">
<img src="js1.png" alt="JavaScript Noob">
<h2>JavaScript Noob</h2>
<button onclick="alert('Quiz not implemented yet')">Start</button>
<button onclick="jseasy()">Start</button>
</div>
<div class="quiz-card">
<img src="js2.png" alt="JavaScript Pro">
<h2>JavaScript Pro</h2>
<button onclick="alert('Quiz not implemented yet')">Start</button>
<button onclick="jsmed()">Start</button>
</div>
<div class="quiz-card">
<img src="js3.png" alt="JavaScript Ultimate">
<h2>JavaScript Ultimate</h2>
<button onclick="alert('Quiz not implemented yet')">Start</button>
<button onclick="jshard()">Start</button>
</div>
</div>
</div>
Expand All @@ -203,6 +203,15 @@ <h2>JavaScript Ultimate</h2>
function csshard() {
window.location.href = 'hardcss.html';
}
function jseasy() {
window.location.href = 'jseasy.html'; // Redirect to the quiz page
}
function jsmed() {
window.location.href = 'jsmed.html'; // Redirect to the quiz page
}
function jshard() {
window.location.href = 'jshard.html'; // Redirect to the quiz page
}
</script>
</body>
</html>
194 changes: 194 additions & 0 deletions challenges/jseasy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Easy Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.quiz-container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
max-width: 500px;
width: 100%;
}

h1 {
text-align: center;
margin-bottom: 20px;
}

.question {
margin-bottom: 15px;
}

.options {
list-style-type: none;
padding: 0;
}

.option {
background-color: #e7f3fe;
padding: 10px;
border-radius: 5px;
margin: 5px 0;
cursor: pointer;
transition: background-color 0.3s;
}

.option:hover {
background-color: #d1e7fd;
}

.selected {
background-color: #b3e5fc;
}

button {
background-color: #007bff;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
display: block;
width: 100%;
margin-top: 10px;
}

button:hover {
background-color: #0056b3;
}

.hidden {
display: none;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>JavaScript Quiz</h1>
<div id="question-container"></div>
<button id="next-button" class="hidden" onclick="nextQuestion()">Next Question</button>
<button id="submit-button" class="hidden" onclick="submitAnswers()">Submit Answers</button>
</div>

<script>
const questions = [
{
question: "1) What does JS stand for?",
options: [
"JavaScript",
"Java Source",
"Just Scripts",
"Jelly Script"
],
answer: 0
},
{
question: "2) Which of the following is used to declare a variable in JS?",
options: [
"let",
"int",
"var",
"All of the above"
],
answer: 3
},
{
question: "3) Which symbol is used for comments in JavaScript?",
options: [
"//",
"#",
"/* */",
"!"
],
answer: 0
},
{
question: "4) Which method is used to parse a JSON string in JS?",
options: [
"JSON.parse()",
"JSON.stringify()",
"JSON.object()",
"None of the above"
],
answer: 0
},
{
question: "5) What is the correct syntax to create a function in JavaScript?",
options: [
"function myFunction()",
"function:myFunction()",
"create function myFunction()",
"None of the above"
],
answer: 0
}
];

let currentQuestionIndex = 0;
let score = 0;

function showQuestion() {
const questionContainer = document.getElementById('question-container');
const question = questions[currentQuestionIndex];
questionContainer.innerHTML = `
<div class="question">
<h3>${question.question}</h3>
<ul class="options">
${question.options.map((option, i) => `
<li class="option" onclick="selectOption(this, ${i})">${option}</li>
`).join('')}
</ul>
</div>
`;
document.getElementById('next-button').classList.add('hidden');
document.getElementById('submit-button').classList.add('hidden');
}

function selectOption(optionElement, selectedIndex) {
const options = document.querySelectorAll('.option');
options.forEach(option => option.classList.remove('selected'));
optionElement.classList.add('selected');

const question = questions[currentQuestionIndex];
if (selectedIndex === question.answer) {
score++;
}

document.getElementById('next-button').classList.remove('hidden');
}

function nextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
document.getElementById('next-button').classList.add('hidden');
document.getElementById('submit-button').classList.remove('hidden');
document.getElementById('question-container').innerHTML = `<h3>Quiz Complete! Your score is ${score} out of ${questions.length}</h3>`;
}
}

function submitAnswers() {
alert(`You scored ${score} out of ${questions.length}`);
window.location.href = 'index.html'; // Redirect to main page after submitting
}

window.onload = showQuestion; // Show the first question when the page loads
</script>
</body>
</html>

0 comments on commit c3803b9

Please sign in to comment.