Skip to content

Commit

Permalink
Merge pull request #2373 from SrijaVuppala295/cssmed
Browse files Browse the repository at this point in the history 
Enhancing the UI of CSS medium Quiz !!
  • Loading branch information
@iamrahulmahato
iamrahulmahato authored Nov 10, 2024
2 parents 747343d + 26e5819 commit 640e2fd
Showing 1 changed file with 54 additions and 44 deletions.
98 changes: 54 additions & 44 deletions challenges/medcss.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,15 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS MEDIUM Quiz</title>
<link rel="shortcut icon" href="./assets/image/favicon.png" type="image/x-icon">

<style>
body {
font-family: Arial, sans-serif;
background-color: #08114c;
background-color: #0a153e;
color: #f0f0f0;
margin: 0;
padding: 20px;
display: flex;
Expand All @@ -18,21 +21,25 @@
}

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

h1 {
text-align: center;
color: #333;
font-size: 1.8em;
margin-bottom: 20px;
}

.question {
margin-bottom: 15px;
font-weight: bold;
color: #333;
}

.options {
Expand All @@ -41,33 +48,36 @@
}

.option {
background-color: #e7f3fe;
padding: 10px;
border-radius: 5px;
margin: 5px 0;
background-color: #1e1e1e;
padding: 12px;
border-radius: 6px;
margin: 8px 0;
cursor: pointer;
transition: background-color 0.3s;
border: 2px solid transparent; /* Default border */
transition: background-color 0.3s, transform 0.2s;
border: 2px solid transparent;
}

.option:hover {
background-color: #d1e7fd;
background-color: #e76705;
transform: scale(1.02);
}

.selected {
.option.selected {
background-color: #b3e5fc;
border: 2px solid #007bff; /* Selected border color */
border: 2px solid #007bff;
color: #007bff;
}

button {
background-color: #007bff;
color: white;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
padding: 12px;
border-radius: 6px;
cursor: pointer;
display: block;
width: 100%;
font-size: 1em;
transition: background-color 0.3s;
margin-top: 10px;
}

Expand All @@ -80,17 +90,18 @@
}

.code-block {
background-color: black;
color: white;
background-color: #1e1e1e;
color: #ffffff;
padding: 10px;
border-radius: 5px;
overflow-x: auto; /* Adds horizontal scroll for long lines */
overflow-x: auto;
font-family: monospace;
}
</style>
</head>
<body>
<div class="quiz-container">
<h1>CSS MEDIUM CHALLENGE</h1>
<h1>CSS Medium Challenge</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>
Expand All @@ -111,7 +122,7 @@ <h1>CSS MEDIUM CHALLENGE</h1>
"c) color: red, text-decoration: underline and font-style: italic all works",
"d) text-decoration: underline and font-style: italic works"
],
answer: 1
answer: 2
},
{
question: "2) Which of the following are the CSS Extension Prefixes for Webkit?",
Expand All @@ -124,15 +135,15 @@ <h1>CSS MEDIUM CHALLENGE</h1>
answer: 3
},
{
question: "3) Which of the following CSS property defines the space between cells in a table?",
options: [
"a) border-spacing",
"b) border-style",
"c) border",
"d) none of the mentioned"
],
answer: 0 // Index of the correct answer (0 for 'a', 1 for 'b', etc.)
},
question: "3) Which of the following CSS property defines the space between cells in a table?",
options: [
"a) border-spacing",
"b) border-style",
"c) border",
"d) none of the mentioned"
],
answer: 0
},
{
question: "4) Which of the following is the first CSS specification to become an official W3C Recommendation?",
options: [
Expand Down Expand Up @@ -212,16 +223,15 @@ <h1>CSS MEDIUM CHALLENGE</h1>
const questionContainer = document.getElementById('question-container');
const question = questions[currentQuestionIndex];
questionContainer.innerHTML = `
<div class="question">
<h3>${question.question}</h3>
${question.code ? `<pre class="code-block"><code>${question.code}</code></pre>` : ''}
<ul class="options">
${question.options.map((option, i) => `
<li class="option" onclick="selectOption(this, ${i})">${option}</li>
`).join('')}
</ul>
</div>
<div class="question">${question.question}</div>
${question.code ? `<pre class="code-block"><code>${question.code}</code></pre>` : ''}
<ul class="options">
${question.options.map((option, i) => `
<li class="option" onclick="selectOption(this, ${i})">${option}</li>
`).join('')}
</ul>
`;

document.getElementById('next-button').classList.add('hidden');
document.getElementById('submit-button').classList.add('hidden');
}
Expand All @@ -246,16 +256,16 @@ <h3>${question.question}</h3>
} else {
document.getElementById('next-button').classList.add('hidden');
document.getElementById('submit-button').classList.remove('hidden');
document.getElementById('question-container').innerHTML = `<h3>Challenge Complete! Your score is ${score} out of ${questions.length}</h3>`;
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.location.href = 'index.html';
}

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

0 comments on commit 640e2fd

Please sign in to comment.