Spaces:
Sleeping
Sleeping
File size: 2,992 Bytes
05dff9f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | {% extends "base.html" %}
{% block content %}
<style>
body {
font-family: 'Open Sans', sans-serif;
background: linear-gradient(to bottom, #a8dadc, #457b9d);
color: #1d3557;
margin: 0;
padding: 0;
}
.header {
background: #1d3557;
color:black;
padding: 20px;
text-align: center;
border-bottom: 5px solid #457b9d;
border-radius: 0 0 20px 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.header h1 {
margin: 0;
font-size: 28px;
letter-spacing: 1px;
}
.header a {
color: #f1faee;
text-decoration: none;
font-size: 16px;
background: #457b9d;
padding: 6px 12px;
border-radius: 12px;
transition: background 0.3s;
}
.header a:hover {
background: #1d3557;
}
.quiz-form {
background: rgba(255, 255, 255, 0.9);
margin: 40px auto;
padding: 30px;
width: 80%;
max-width: 700px;
border-radius: 20px;
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
border: 2px solid #457b9d;
}
.quiz-form h3 {
font-size: 20px;
color: #1d3557;
margin-bottom: 10px;
}
.quiz-form label {
display: block;
background: #e0f7fa;
padding: 10px 15px;
border-radius: 10px;
margin-bottom: 8px;
border: 1px solid #b2ebf2;
cursor: pointer;
transition: all 0.3s ease;
}
.quiz-form label:hover {
background: #b2ebf2;
transform: translateY(-2px);
}
.quiz-form input[type="radio"] {
margin-right: 10px;
}
button[type="submit"] {
background: linear-gradient(90deg, #219ebc, #023047);
color: #f1faee;
border: none;
padding: 12px 25px;
border-radius: 20px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
margin-top: 20px;
display: block;
width: 100%;
transition: transform 0.2s, background 0.3s;
}
button[type="submit"]:hover {
transform: scale(1.05);
background: linear-gradient(90deg, #48cae4, #023047);
}
</style>
<div class="header">
<h1>Quiz for: {{ video.title }}</h1>
<a href="{{ url_for('dashboard') }}">Back to Dashboard</a>
</div>
<form method="POST" class="quiz-form">
{% for i, question_data in enumerate(quiz_questions) %}
<h3>{{ i+1 }}. {{ question_data.question }}</h3>
{% for j, option in enumerate(question_data.options) %}
<label>
<input type="radio" name="question_{{ i }}" value="{{ j }}" required>
{{ option }}
</label>
{% endfor %}
<br>
{% endfor %}
<button type="submit">Submit Quiz</button>
</form>
{% endblock %}
|