Commit e94dfe5a authored by erreur401's avatar erreur401

front template tweek (quiz / quizzes / learn / flatpage )

parent 72d32cff
......@@ -15,7 +15,67 @@
h1, h2, h3, h4, h5 {
font-family: "hershey";
font-weight: bolder;
text-align: center;
}
input[type=radio] {
background: #FF0000;
border: none;
}
input[type=radio]:checked {
background: #0000FF;
border: RED;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.no-gutter {
......@@ -205,7 +265,6 @@ ul#menuSecond li a:hover {
margin-bottom: 30px;
border-radius: 2%;
text-align: center;
max-height: 300px;
}
.tutoItem .tutoBox img {
max-width: 110%;
......@@ -232,26 +291,26 @@ ul#menuSecond li a:hover {
margin-left: -10px;
transition: all 0.2s ease;
}
.tutoItem .tutoBox .elec.overTuto:before {
.tutoItem .tutoBox .green.overTuto:before {
background: #90ee90;
}
.tutoItem .tutoBox .prog.overTuto:before {
.tutoItem .tutoBox .blue.overTuto:before {
background: blue;
}
.tutoItem .tutoBox .usinage.overTuto:before {
.tutoItem .tutoBox .red.overTuto:before {
background: red;
}
.tutoItem .tutoBox:hover .elec.overTuto:before {
background: url(../img/electronique.png) no-repeat #90ee90;
.tutoItem .tutoBox:hover .green.overTuto:before {
background: url(../img/chip.png) no-repeat #90ee90;
background-position: center !important;
background-size: 40%;
}
.tutoItem .tutoBox:hover .prog.overTuto:before {
.tutoItem .tutoBox:hover .blue.overTuto:before {
background: url(../img/cncico.png) no-repeat blue;
background-position: center;
background-size: 40%;
}
.tutoItem .tutoBox:hover .usinage.overTuto:before {
.tutoItem .tutoBox:hover .red.overTuto:before {
background: url(../img/3dprint.png) no-repeat red;
background-position: center;
background-size: 40%;
......
......@@ -7,7 +7,7 @@
.cb {
clear: both;
clear: both;
}
......@@ -18,9 +18,71 @@
h1, h2, h3, h4, h5 {
font-family: "hershey";
font-weight: bolder;
text-align: center;
// text-align: center;
}
input[type="radio"] {
background: #FF0000;
border: none;
}
input[type="radio"]:checked{
background: #0000FF;
border: RED;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.no-gutter {
margin: 0;
padding: 0;
......@@ -404,7 +466,7 @@ ul {
padding-top:100%;
}
.badgeItem {
.badgeItem {
display: block;
text-align: center;
justify-content: space-around;
......@@ -414,4 +476,4 @@ ul {
footer {
background: #2c3e50;
height: 200px;
}
\ No newline at end of file
}
......@@ -19,7 +19,6 @@
<div class="tutoWrapper">
<div class="tutoContent container">
<H1>LEARN</H1>
{{page}}
</div>
</div>
......
......@@ -25,6 +25,7 @@
{% for article in articles %}
<div class="col col-12 col-sm-6 col-md-4 col-lg-3 tutoItem">
<div class="tutoBox">
<a href="/learn/{{article.path}}">
{% if article.featured_image %}
<img src="../static/{{article.featured_image}}">
<div class="overTuto {{ article.cat }}">
......@@ -38,9 +39,10 @@
<span class="desc">{{article.desc}}</span>
</div>
{% endif%}
</a>
</div>
</div>
{% endfor %}
......@@ -48,5 +50,5 @@
</div>
</div>
</div>
{% endblock %}
{% extends "quiz_base.html" %}
{% block content %}
<div class='container'>
<form method="post" action="/check_quiz/{{id}}">
<input type="hidden" name="ord" value="{{quiz_ordering}}" />
<p>{{quiz['description']|safe}}</p>
{% for question in quiz['questions'] %}
{% set outer_loop = loop %}
<p>
<h4>{{question['text']|safe}}</h4>
<h5>{{question['text']|safe}}</h5>
{% for answer in question['options'] %}
<p><label><input type="radio" name="{{outer_loop.index0}}" value="{{loop.index0}}" /> {{answer[0]|safe}}</label></p>
<p><label><input type="radio" checked="checked" name="{{outer_loop.index0}}" value="{{loop.index0}}" /> {{answer[0]|safe}}</label></p>
{% endfor %}
</p>
{% endfor %}
<input type="submit" value="Submit Your Quiz">
</form>
</div>
{% endblock %}
......@@ -2,9 +2,9 @@
{% block title %} {{quiz['name']}} {% endblock %}
{% block body %}
<div id='content'>
<div class='container'>
<span id='title'>{% block page_title %} {% endblock %}</span>
<p>{{quiz['description']|safe}}</p>
{% block questions %} {% endblock %}
</div>
{% endblock %}
\ No newline at end of file
{% endblock %}
{% extends "base.html" %}
{% block title %} Quiz Website - All Quizzes {% endblock %}
{% block content %}
<div id='content'>
<div class='container'>
<span id='title'>All Quizzes</span>
<ul>
{{quiz_names}}
{% for id, name in quiz_names %}
<li><a href="{{url_for('quiz', id=id)}}">{{name}}</a></li>
<li><a href="{{url_for('quiz', id=id)}}">{{name}}</a>
</li>
{% endfor %}
</ul>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment