admin/38894-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat Quiz UI - added correct answer UI

Browse Source
This commit is contained in:
PragatiVerma18 2020-10-10 23:26:18 +05:30
parent 516b66439f
commit 6f25642cc7
3 changed files with 93 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
static/css/quiz.css
View File

@ -1,4 +1,3 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
html { html {
box-sizing: border-box; box-sizing: border-box;
} }
@ -14,12 +13,10 @@ body {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
height: 100%; height: 100%;
font-family: "Montserrat", sans-serif;
} }
body { body {
font-family: "Comfortaa", cursive; background-color: #000000;
color: #fff;
user-select: none; user-select: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -37,9 +34,13 @@ section {
} }
main { 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; border-radius: 10px;
padding: 5px 20px 50px; padding: 50px 20px 50px;
width: 95%; width: 95%;
max-width: 500px; max-width: 500px;
margin: 0 auto 214px; margin: 0 auto 214px;
@ -49,47 +50,39 @@ main {
text-align: center; text-align: center;
} }
.quiz-options { input[type="radio"] {
margin: 60px 0; display: none;
} }
input[type="radio"] + label {
[type="radio"] { display: inline-block;
border: 0; width: 95%;
height: 0.0625rem; padding: 10px;
width: 0.0625rem; border: 1px solid #ddd;
position: absolute; margin-bottom: 10px;
cursor: pointer;
} }
input[type="radio"] + label:hover {
label { border: 1px solid #000000;
display: flex;
align-items: center;
border-radius: 5px;
margin-bottom: 15px;
padding: 6px 0;
position: relative;
width: 100%;
color: #000;
} }
input[type="radio"]:checked + label {
label:hover .alphabet { background-image: none;
background: #000; background-color: #0c0;
color: #fff; 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 { .worngans {
border-radius: 5px; background-color: #f36;
border: solid 1px #000; color: #fff;
padding: 0.4rem 0.5rem 0.4rem; border: 1px solid #f36 !important;
width: 2.3rem; -webkit-transition: all 0.2s ease-in-out;
margin: 0 1.3rem 0 0.7rem; -moz-transition: all 0.2s ease-in-out;
display: flex; -o-transition: all 0.2s ease-in-out;
justify-content: center; -ms-transition: all 0.2s ease-in-out;
color: #000; transition: all 0.2s ease-in-out;
}
label .icon {
height: auto;
position: absolute;
left: 92%;
top: 12px;
} }

2
static/css/style.css
View File

@ -1,4 +1,3 @@
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");
html, html,
body { body {
display: flex; display: flex;
@ -6,7 +5,6 @@ body {
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-family: "Montserrat", sans-serif;
} }
.card { .card {
border-radius: 10px; border-radius: 10px;

38
templates/quiz.html
View File

@ -7,6 +7,15 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" /> <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') }}" /> <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/quiz.css') }}" />
<title>MLH Quizzet</title> <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> </head>
<body> <body>
@ -21,27 +30,26 @@
</div> </div>
</div> </div>
</nav> </nav>
<a href="{{ url_for('index') }}"> Home </a>
{% if uploaded == true %} {% if uploaded == true %}
{% for i in range(size) %} {% for i in range(size) %}
<section class="section-1" id="section-1"> <section class="section-1" id="section-1">
<main> <main>
<p class="has-text-weight-bold has-text-black is-size-2">Question {{ i+1 }}</p> <div class="scp-quizzes-main">
<div class="text-container"> <div class="scp-quizzes-data">
<p class="has-text-weight-bold has-text-black is-size-4"> <h3>{{ i+1 }}. {{ questions[i+1]['question'] }}</h3>
{{ 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] }}
<br /> <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 %} {% endfor %}
</div> </div>
</div>
</form> </form>
</main> </main>
</section> </section>
@ -49,6 +57,8 @@
{% else %} {% else %}
<h1>Could not upload file</h1> <h1>Could not upload file</h1>
{% endif %} {% endif %}
</body> </body>
</html> </html>