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

Week3 quiz changes #12

Merged
merged 3 commits into from
Oct 17, 2024
Merged

Week3 quiz changes #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d789755
make quiz changes
iA2J Oct 16, 2024
118c38e
fix quiz
iA2J Oct 16, 2024
78fb16e
fix prettier errors
iA2J Oct 17, 2024
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
14 changes: 7 additions & 7 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

27 changes: 26 additions & 1 deletion public/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ a:hover {
transition:
background-color 0.3s ease,
transform 0.3s ease;
margin-top: 20px;
}

button.cta-button {
Expand All @@ -55,6 +56,10 @@ button.cta-button {
transform: translateY(-3px);
}

html {
scroll-behavior: smooth;
}

/* Header and Navigation */
header {
background-color: var(--white);
Expand Down Expand Up @@ -240,18 +245,38 @@ nav ul li a.active::after {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1000px;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
gap: 2rem;
}

.quiz-info {
max-width: 50%;
flex: 1;
}

.quiz-img {
max-width: 40%;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
flex: 1;
}

@media (max-width: 768px) {
.quiz-content {
flex-direction: column;
text-align: center;
}

.quiz-info,
.quiz-img {
max-width: 100%;
}

.quiz-img {
margin-top: 2rem;
}
}

/* Contact Section */
Expand Down
214 changes: 213 additions & 1 deletion views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,219 @@ <h2>Find Your Learning Type</h2>
Ready to discover which learning type suits you best? Take our
quick quiz and unlock your potential!
</p>
<a href="quiz.html" class="cta-button">Start Quiz</a>
<!-- <a href="quiz.html" class="cta-button">Start Quiz</a> -->
<!--form-->
<form id="learning-type-quiz">
<!-- Question 1 -->
<div class="quiz-question">
<p>1. How do you prefer to study?</p>
<label
><input type="radio" name="q1" value="a" /> Reading
textbooks</label
><br />
<label
><input type="radio" name="q1" value="b" /> Watching
videos</label
><br />
<label
><input type="radio" name="q1" value="c" /> Hands-on
practice</label
><br />
<label
><input type="radio" name="q1" value="d" /> Listening to
lectures</label
>
</div>

<!-- Question 2 -->
<div class="quiz-question">
<p>2. When learning new material, what helps you most?</p>
<label
><input type="radio" name="q2" value="a" /> Diagrams and
charts</label
><br />
<label
><input type="radio" name="q2" value="b" /> Talking it out
with others</label
><br />
<label
><input type="radio" name="q2" value="c" /> Writing
notes</label
><br />
<label
><input type="radio" name="q2" value="d" /> Performing the
task</label
>
</div>

<!-- Question 3 -->
<div class="quiz-question">
<p>3. Which activity do you enjoy more?</p>
<label
><input type="radio" name="q3" value="a" /> Solving
puzzles</label
><br />
<label
><input type="radio" name="q3" value="b" /> Debating with
friends</label
><br />
<label
><input type="radio" name="q3" value="c" /> Writing
essays</label
><br />
<label
><input type="radio" name="q3" value="d" /> Building
things</label
>
</div>

<!-- Question 4 -->
<div class="quiz-question">
<p>
4. When reading, how do you prefer to understand the material?
</p>
<label
><input type="radio" name="q4" value="a" /> Looking at
illustrations</label
><br />
<label
><input type="radio" name="q4" value="b" /> Discussing the
content</label
><br />
<label
><input type="radio" name="q4" value="c" /> Taking detailed
notes</label
><br />
<label
><input type="radio" name="q4" value="d" /> Trying it out
myself</label
>
</div>

<!-- Question 5 -->
<div class="quiz-question">
<p>5. Which tool would you use to learn something new?</p>
<label
><input type="radio" name="q5" value="a" />
Infographics</label
><br />
<label
><input type="radio" name="q5" value="b" /> Group
discussions</label
><br />
<label
><input type="radio" name="q5" value="c" /> Flashcards</label
><br />
<label
><input type="radio" name="q5" value="d" /> Tutorials</label
>
</div>

<!-- Question 6 -->
<div class="quiz-question">
<p>6. How do you remember information best?</p>
<label
><input type="radio" name="q6" value="a" /> Visualizing
it</label
><br />
<label
><input type="radio" name="q6" value="b" /> Explaining it to
someone</label
><br />
<label
><input type="radio" name="q6" value="c" /> Writing it
down</label
><br />
<label
><input type="radio" name="q6" value="d" /> Practicing
it</label
>
</div>

<!-- Question 7 -->
<div class="quiz-question">
<p>7. What do you do when you encounter a new skill?</p>
<label
><input type="radio" name="q7" value="a" /> Watch someone
demonstrate it</label
><br />
<label
><input type="radio" name="q7" value="b" /> Ask for an
explanation</label
><br />
<label
><input type="radio" name="q7" value="c" /> Read about
it</label
><br />
<label
><input type="radio" name="q7" value="d" /> Try it out</label
>
</div>

<!-- Question 8 -->
<div class="quiz-question">
<p>8. In school, how did you prefer to learn?</p>
<label
><input type="radio" name="q8" value="a" /> Visual aids
(charts, graphs)</label
><br />
<label
><input type="radio" name="q8" value="b" /> Group work and
discussions</label
><br />
<label
><input type="radio" name="q8" value="c" /> Writing
essays</label
><br />
<label
><input type="radio" name="q8" value="d" /> Hands-on
experiments</label
>
</div>

<!-- Question 9 -->
<div class="quiz-question">
<p>9. What type of course material do you prefer?</p>
<label
><input type="radio" name="q9" value="a" /> Diagrams and
visuals</label
><br />
<label
><input type="radio" name="q9" value="b" /> Discussion-based
materials</label
><br />
<label
><input type="radio" name="q9" value="c" /> Written
text</label
><br />
<label
><input type="radio" name="q9" value="d" /> Interactive
tasks</label
>
</div>

<!-- Question 10 -->
<div class="quiz-question">
<p>10. How do you prefer to prepare for an exam?</p>
<label
><input type="radio" name="q10" value="a" /> Study with charts
and images</label
><br />
<label
><input type="radio" name="q10" value="b" /> Discuss the
material with friends</label
><br />
<label
><input type="radio" name="q10" value="c" /> Write summaries
and notes</label
><br />
<label
><input type="radio" name="q10" value="d" /> Practice solving
problems</label
>
</div>
<button type="submit" class="cta-button">Submit Quiz</button>
</form>
</div>
<img
src="placeholder-quiz.jpg"
Expand Down
Loading