Feat Quiz UI - added correct answer UI
This commit is contained in:
PragatiVerma18
parent
516b66439f
commit
6f25642cc7
@ -1,4 +1,3 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -14,12 +13,10 @@ body {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Comfortaa", cursive;
|
||||
color: #fff;
|
||||
background-color: #000000;
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -37,9 +34,13 @@ section {
|
||||
}
|
||||
|
||||
main {
|
||||
background: #d8d8dc;
|
||||
-webkit-box-shadow: 0 10px 6px -6px #777;
|
||||
-moz-box-shadow: 0 10px 6px -6px #777;
|
||||
box-shadow: 0 10px 6px -6px #777;
|
||||
color: #000000;
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
padding: 5px 20px 50px;
|
||||
padding: 50px 20px 50px;
|
||||
width: 95%;
|
||||
max-width: 500px;
|
||||
margin: 0 auto 214px;
|
||||
@ -49,47 +50,39 @@ main {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.quiz-options {
|
||||
margin: 60px 0;
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[type="radio"] {
|
||||
border: 0;
|
||||
height: 0.0625rem;
|
||||
width: 0.0625rem;
|
||||
position: absolute;
|
||||
input[type="radio"] + label {
|
||||
display: inline-block;
|
||||
width: 95%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
padding: 6px 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
input[type="radio"] + label:hover {
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
label:hover .alphabet {
|
||||
background: #000;
|
||||
input[type="radio"]:checked + label {
|
||||
background-image: none;
|
||||
background-color: #0c0;
|
||||
color: #fff;
|
||||
border: 1px solid #0c0 !important;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
-ms-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
label .alphabet {
|
||||
border-radius: 5px;
|
||||
border: solid 1px #000;
|
||||
padding: 0.4rem 0.5rem 0.4rem;
|
||||
width: 2.3rem;
|
||||
margin: 0 1.3rem 0 0.7rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
label .icon {
|
||||
height: auto;
|
||||
position: absolute;
|
||||
left: 92%;
|
||||
top: 12px;
|
||||
.worngans {
|
||||
background-color: #f36;
|
||||
color: #fff;
|
||||
border: 1px solid #f36 !important;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
-ms-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
|
||||
html,
|
||||
body {
|
||||
display: flex;
|
||||
@ -6,7 +5,6 @@ body {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
.card {
|
||||
border-radius: 10px;
|
||||
|
||||
@ -7,6 +7,15 @@
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/quiz.css') }}" />
|
||||
<title>MLH Quizzet</title>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type='text/javascript'></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$('label').click(function () {
|
||||
$('label').removeClass('worngans');
|
||||
$(this).addClass('worngans');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -21,27 +30,26 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<a href="{{ url_for('index') }}"> Home </a>
|
||||
{% if uploaded == true %}
|
||||
|
||||
{% for i in range(size) %}
|
||||
<section class="section-1" id="section-1">
|
||||
<main>
|
||||
<p class="has-text-weight-bold has-text-black is-size-2">Question {{ i+1 }}</p>
|
||||
<div class="text-container">
|
||||
<p class="has-text-weight-bold has-text-black is-size-4">
|
||||
{{ questions[i+1]['question'] }}
|
||||
</p>
|
||||
</div>
|
||||
<form>
|
||||
<div class="quiz-options">
|
||||
{% for j in questions[i+1]['options'] %}
|
||||
<input type="radio" class="input-radio one-a" id="one-a" name="yes-1" required />
|
||||
<label class="radio-label" for="one-a">
|
||||
<span class="alphabet">{{ j+1 }}</span> {{ questions[i+1]['options'][j+1] }}
|
||||
<div class="scp-quizzes-main">
|
||||
<div class="scp-quizzes-data">
|
||||
<h3>{{ i+1 }}. {{ questions[i+1]['question'] }}</h3>
|
||||
<br />
|
||||
<form>
|
||||
{% for j in questions[i+1]['options'] %}
|
||||
{% if questions[i+1]['options'][j+1] == questions[i+1]['answer'] %}
|
||||
<input type="radio" id="{{ questions[i+1]['answer'] }}" name="question{{ i+1 }}">
|
||||
<label for="{{ questions[i+1]['answer'] }}">{{ j }}. {{ questions[i+1]['options'][j+1] }}</label><br />
|
||||
{% else %}
|
||||
<input type="radio" name="question{{ i+1 }}">
|
||||
<label>{{ j }}. {{ questions[i+1]['options'][j+1] }}</label><br />
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
</section>
|
||||
@ -49,6 +57,8 @@
|
||||
{% else %}
|
||||
<h1>Could not upload file</h1>
|
||||
{% endif %}
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user