Commit e94dfe5a authored by erreur401's avatar erreur401

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

parent 72d32cff
...@@ -15,7 +15,67 @@ ...@@ -15,7 +15,67 @@
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
font-family: "hershey"; font-family: "hershey";
font-weight: bolder; 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 { .no-gutter {
...@@ -205,7 +265,6 @@ ul#menuSecond li a:hover { ...@@ -205,7 +265,6 @@ ul#menuSecond li a:hover {
margin-bottom: 30px; margin-bottom: 30px;
border-radius: 2%; border-radius: 2%;
text-align: center; text-align: center;
max-height: 300px;
} }
.tutoItem .tutoBox img { .tutoItem .tutoBox img {
max-width: 110%; max-width: 110%;
...@@ -232,26 +291,26 @@ ul#menuSecond li a:hover { ...@@ -232,26 +291,26 @@ ul#menuSecond li a:hover {
margin-left: -10px; margin-left: -10px;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.tutoItem .tutoBox .elec.overTuto:before { .tutoItem .tutoBox .green.overTuto:before {
background: #90ee90; background: #90ee90;
} }
.tutoItem .tutoBox .prog.overTuto:before { .tutoItem .tutoBox .blue.overTuto:before {
background: blue; background: blue;
} }
.tutoItem .tutoBox .usinage.overTuto:before { .tutoItem .tutoBox .red.overTuto:before {
background: red; background: red;
} }
.tutoItem .tutoBox:hover .elec.overTuto:before { .tutoItem .tutoBox:hover .green.overTuto:before {
background: url(../img/electronique.png) no-repeat #90ee90; background: url(../img/chip.png) no-repeat #90ee90;
background-position: center !important; background-position: center !important;
background-size: 40%; background-size: 40%;
} }
.tutoItem .tutoBox:hover .prog.overTuto:before { .tutoItem .tutoBox:hover .blue.overTuto:before {
background: url(../img/cncico.png) no-repeat blue; background: url(../img/cncico.png) no-repeat blue;
background-position: center; background-position: center;
background-size: 40%; background-size: 40%;
} }
.tutoItem .tutoBox:hover .usinage.overTuto:before { .tutoItem .tutoBox:hover .red.overTuto:before {
background: url(../img/3dprint.png) no-repeat red; background: url(../img/3dprint.png) no-repeat red;
background-position: center; background-position: center;
background-size: 40%; background-size: 40%;
......
...@@ -18,9 +18,71 @@ ...@@ -18,9 +18,71 @@
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
font-family: "hershey"; font-family: "hershey";
font-weight: bolder; 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 { .no-gutter {
margin: 0; margin: 0;
padding: 0; padding: 0;
......
...@@ -19,7 +19,6 @@ ...@@ -19,7 +19,6 @@
<div class="tutoWrapper"> <div class="tutoWrapper">
<div class="tutoContent container"> <div class="tutoContent container">
<H1>LEARN</H1> <H1>LEARN</H1>
{{page}} {{page}}
</div> </div>
</div> </div>
......
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
{% for article in articles %} {% for article in articles %}
<div class="col col-12 col-sm-6 col-md-4 col-lg-3 tutoItem"> <div class="col col-12 col-sm-6 col-md-4 col-lg-3 tutoItem">
<div class="tutoBox"> <div class="tutoBox">
<a href="/learn/{{article.path}}">
{% if article.featured_image %} {% if article.featured_image %}
<img src="../static/{{article.featured_image}}"> <img src="../static/{{article.featured_image}}">
<div class="overTuto {{ article.cat }}"> <div class="overTuto {{ article.cat }}">
...@@ -38,9 +39,10 @@ ...@@ -38,9 +39,10 @@
<span class="desc">{{article.desc}}</span> <span class="desc">{{article.desc}}</span>
</div> </div>
{% endif%} {% endif%}
</a>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
......
{% extends "quiz_base.html" %} {% extends "quiz_base.html" %}
{% block content %} {% block content %}
<div class='container'>
<form method="post" action="/check_quiz/{{id}}"> <form method="post" action="/check_quiz/{{id}}">
<input type="hidden" name="ord" value="{{quiz_ordering}}" /> <input type="hidden" name="ord" value="{{quiz_ordering}}" />
<p>{{quiz['description']|safe}}</p>
{% for question in quiz['questions'] %} {% for question in quiz['questions'] %}
{% set outer_loop = loop %} {% set outer_loop = loop %}
<p> <p>
<h4>{{question['text']|safe}}</h4> <h5>{{question['text']|safe}}</h5>
{% for answer in question['options'] %} {% 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 %} {% endfor %}
</p> </p>
{% endfor %} {% endfor %}
<input type="submit" value="Submit Your Quiz"> <input type="submit" value="Submit Your Quiz">
</form> </form>
</div>
{% endblock %} {% endblock %}
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{% block title %} {{quiz['name']}} {% endblock %} {% block title %} {{quiz['name']}} {% endblock %}
{% block body %} {% block body %}
<div id='content'> <div class='container'>
<span id='title'>{% block page_title %} {% endblock %}</span> <span id='title'>{% block page_title %} {% endblock %}</span>
<p>{{quiz['description']|safe}}</p> <p>{{quiz['description']|safe}}</p>
{% block questions %} {% endblock %} {% block questions %} {% endblock %}
......
{% extends "base.html" %} {% extends "base.html" %}
{% block title %} Quiz Website - All Quizzes {% endblock %} {% block title %} Quiz Website - All Quizzes {% endblock %}
{% block content %} {% block content %}
<div id='content'> <div class='container'>
<span id='title'>All Quizzes</span> <span id='title'>All Quizzes</span>
<ul> <ul>
{{quiz_names}}
{% for id, name in 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 %} {% endfor %}
</ul> </ul>
</div> </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