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

Created a JS Easy Quiz challenge !! #2417

Merged
merged 1 commit into from
Nov 10, 2024
Merged

Created a JS Easy Quiz challenge !! #2417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 12 additions & 3 deletions challenges/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,17 +134,17 @@ <h2>CSS Ultimate</h2>
<div class="quiz-card">
<img src="js1.png" alt="Image 1">
<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="Image 1">
<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="Image 1">
<h2>JavaScript Ultimate</h2>
<button onclick="alert('Quiz not implemented yet')">Start</button>
<button onclick="jshard()">Start</button>
</div>
</div>
</div>
Expand All @@ -162,6 +162,15 @@ <h2>JavaScript Ultimate</h2>
function csshard() {
window.location.href = 'hardcss.html'; // Redirect to the quiz page
}
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
Open in desktop
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>
Loading