Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 28 KiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 135 KiB |
After Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 152 KiB |
Before Width: | Height: | Size: 152 KiB After Width: | Height: | Size: 28 KiB |
@ -0,0 +1,76 @@
|
|||||||
|
@import url(./style.css); /* Import de style.css */
|
||||||
|
|
||||||
|
h2{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2em;
|
||||||
|
padding-top: 15px;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3{
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 15px;
|
||||||
|
margin-right: 15px;
|
||||||
|
margin-top: -5px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkQuiz img{
|
||||||
|
width: 14vw;
|
||||||
|
height: 22vh;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 10px 10px 0px 0px;
|
||||||
|
margin : 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quizCard{
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quiz-container{
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: self-start;
|
||||||
|
gap: 2vw;
|
||||||
|
margin-top: 2em;
|
||||||
|
min-height: 68vh;
|
||||||
|
width: 95vw;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode */
|
||||||
|
|
||||||
|
.dark-mode h3 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .quizCard {
|
||||||
|
background: var(--main-dark-gradient);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode .quiz-container {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Light mode */
|
||||||
|
|
||||||
|
.light-mode h3 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-mode .quizCard {
|
||||||
|
background: var(--main-light-gradient);
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-mode .quiz-container {
|
||||||
|
background: #46BE73;
|
||||||
|
}
|
@ -1,120 +0,0 @@
|
|||||||
/* Conteneur pour les suggestions en deux colonnes */
|
|
||||||
.suggestions-container {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-around;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
a.link-citation {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
width: 47.5%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Citations */
|
|
||||||
.citation-container {
|
|
||||||
background: linear-gradient(to right, #4a148c, #7b1fa2);
|
|
||||||
border-radius: 12px;
|
|
||||||
color: white;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
align-items: flex-start;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
height: 150px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
word-wrap: break-word; /* Permet de couper les mots trop longs */
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fixe la taille pour s'assurer que toutes les citations restent cohérentes */
|
|
||||||
.citation-container .text-content {
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote {
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.citation-image {
|
|
||||||
width: 150px;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
margin: 0;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-content {
|
|
||||||
flex: 1;
|
|
||||||
padding: 10px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center; /* Centre verticalement le texte */
|
|
||||||
word-wrap: break-word; /* Permet de couper les mots trop longs */
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quoteContent {
|
|
||||||
font-size: 1.2em;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.citation .movie, .character, .year {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mode sombre */
|
|
||||||
body.dark-mode .quote {
|
|
||||||
background: linear-gradient(45deg, #4a148c, #7b1fa2);
|
|
||||||
color:white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mode clair */
|
|
||||||
body.light-mode .quote {
|
|
||||||
background-image: linear-gradient(-28deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
|
|
||||||
color:black; /* Changer le texte en noir pour le mode clair */
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .citation,
|
|
||||||
body.light-mode .movie,
|
|
||||||
body.light-mode .character,
|
|
||||||
body.light-mode .year {
|
|
||||||
color: black; /* Forcer le texte en noir pour le mode clair */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive design */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.suggestions-container {
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.citation-container {
|
|
||||||
width: 100%; /* Chaque citation prend toute la largeur sur mobile */
|
|
||||||
max-width: 100%;
|
|
||||||
height: 100px; /* Supprimer la hauteur fixe sur mobile */
|
|
||||||
}
|
|
||||||
|
|
||||||
.citation-image {
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quote {
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,108 +0,0 @@
|
|||||||
/* header.css */
|
|
||||||
|
|
||||||
/* Styles généraux */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #120b1d;
|
|
||||||
font-family: "Lemon", serif;
|
|
||||||
margin-top: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
position: fixed;
|
|
||||||
background-color: #000000;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
vertical-align: center;
|
|
||||||
gap: 30px;
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
vertical-align: center;
|
|
||||||
gap: 30px;
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
vertical-align: center;
|
|
||||||
margin: 10px;
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Mode sombre */
|
|
||||||
body.dark-mode {
|
|
||||||
background-color: #120B1D;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .header {
|
|
||||||
background-color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .header img {
|
|
||||||
filter: invert(0%);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .nav img:hover {
|
|
||||||
filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.dark-mode .search {
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mode clair */
|
|
||||||
body.light-mode {
|
|
||||||
background-color: #ffffff;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .header {
|
|
||||||
background-color: #F4F1DE;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .header img {
|
|
||||||
filter: invert(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .nav img:hover {
|
|
||||||
filter: invert(22%) sepia(6%) saturate(2269%) hue-rotate(193deg) brightness(98%) contrast(106%);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.light-mode .search {
|
|
||||||
background: black;
|
|
||||||
}
|
|
@ -0,0 +1,16 @@
|
|||||||
|
<?php
|
||||||
|
global $twig;
|
||||||
|
|
||||||
|
|
||||||
|
echo $twig->render('head.html.twig', [
|
||||||
|
'title' => "Quiz",
|
||||||
|
'style' => "public/styles/styleAccueilQuiz.css",
|
||||||
|
'scripts' => array("public/script/theme-toggle.js")
|
||||||
|
]);
|
||||||
|
|
||||||
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
|
||||||
|
echo $twig->render('accueilQuiz.html.twig', [
|
||||||
|
'quizs' => $quizs
|
||||||
|
]);
|
||||||
|
?>
|
@ -0,0 +1,17 @@
|
|||||||
|
<?php
|
||||||
|
global $twig;
|
||||||
|
|
||||||
|
|
||||||
|
echo $twig->render('head.html.twig', [
|
||||||
|
'title' => "Quiz",
|
||||||
|
'style' => "public/styles/styleEndQuiz.css",
|
||||||
|
'scripts' => array("public/script/theme-toggle.js")
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Rendu du bandeau
|
||||||
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
|
||||||
|
echo $twig->render('endQuizRandom.html.twig',
|
||||||
|
['score' => $score
|
||||||
|
]);
|
||||||
|
?>
|
@ -1,5 +1,25 @@
|
|||||||
<h1>
|
|
||||||
<?php
|
<?php
|
||||||
echo "ERREUR";
|
global $twig;
|
||||||
?>
|
|
||||||
</h1>
|
if(!isset($erreur[2])){
|
||||||
|
echo $twig->render('head.html.twig', [
|
||||||
|
'title' => "Accueil",
|
||||||
|
'style' => "public/styles/style.css",
|
||||||
|
'scripts' => array("public/script/theme-toggle.js")
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
echo $twig->render('head.html.twig', array(
|
||||||
|
'title' => "Quote",
|
||||||
|
'style' => "../public/styles/styleQuote.css",
|
||||||
|
'scripts' => array("../public/script/theme-toggle-double-param.js", "../public/script/copy.js")
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rendu du bandeau
|
||||||
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
|
||||||
|
echo $twig->render('erreur.html.twig',[
|
||||||
|
'numero' => $erreur[0],
|
||||||
|
'context' => $erreur[1],
|
||||||
|
]);
|
||||||
|
@ -1,17 +1,18 @@
|
|||||||
<?php
|
<?php
|
||||||
global $twig;
|
global $twig;
|
||||||
|
|
||||||
|
|
||||||
echo $twig->render('head.html.twig', [
|
echo $twig->render('head.html.twig', [
|
||||||
'title' => "Quiz",
|
'title' => "Quiz",
|
||||||
'style' => "../public/styles/styleQuiz.css",
|
'style' => "../public/styles/styleQuiz.css",
|
||||||
'scripts' => array("../public/script/theme-toggle-double-param.js")
|
'scripts' => array("../public/script/theme-toggle-double-param.js")
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
||||||
// Rendu du bandeau
|
// Rendu du bandeau
|
||||||
echo $twig->render('bandeau.html.twig');
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
|
||||||
echo $twig->render('quiz.html.twig', ['idQuiz'=>$id , 'question' => $question,'id'=>$idquestion]);
|
echo $twig->render('quiz.html.twig', [
|
||||||
?>
|
'question' => $question,
|
||||||
|
'id'=>$idquestion,
|
||||||
|
'nb' => $num + 1,
|
||||||
|
'nbFinal' => $nbQuestion
|
||||||
|
]);
|
||||||
|
@ -0,0 +1,20 @@
|
|||||||
|
<?php
|
||||||
|
global $twig;
|
||||||
|
|
||||||
|
echo $twig->render('head.html.twig', [
|
||||||
|
'title' => "Random Quiz",
|
||||||
|
'style' => "public/styles/styleQuiz.css",
|
||||||
|
'scripts' => array("public/script/theme-toggle.js")
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Rendu du bandeau
|
||||||
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
echo $twig->render('quizRandom.html.twig', [
|
||||||
|
'vie' => $vie,
|
||||||
|
'question' => $question,
|
||||||
|
'nb' => $no_question + 1
|
||||||
|
]);
|
@ -0,0 +1,16 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
global $twig;
|
||||||
|
|
||||||
|
echo $twig->render('head.html.twig', array(
|
||||||
|
'title' => "Recap Quote",
|
||||||
|
'style' => "public/styles/styleSubmitQuote.css",
|
||||||
|
'scripts' => array("public/script/theme-toggle.js")
|
||||||
|
));
|
||||||
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
echo $twig -> render("recapSubmitQuote.html.twig", [
|
||||||
|
'content' => $recap["content"],
|
||||||
|
'character' => $recap["character"],
|
||||||
|
'source' => $recap["src"]
|
||||||
|
]);
|
||||||
|
?>
|
@ -0,0 +1,26 @@
|
|||||||
|
<h2>Liste des Quiz</h2>
|
||||||
|
<div class="quiz-container">
|
||||||
|
|
||||||
|
<div class="quizCard">
|
||||||
|
<a href="{{ racine }}/randomQuiz" class="linkQuiz">
|
||||||
|
<img src="{{ racine }}/images/quizz.svg" alt="Image du quiz random">
|
||||||
|
<h3>Quiz random </h3>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% for quiz in quizs %}
|
||||||
|
<div class="quizCard">
|
||||||
|
<a href="{{ racine }}/quiz/{{ quiz.id_quiz }}" class="linkQuiz">
|
||||||
|
<img src="{{ quiz.imgPath }}" alt="Image du quiz {{ quiz.title }}">
|
||||||
|
<h3>{{ quiz.title }} ({{ quiz.nb_quest }} questions)</h3>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<h3>Aucun quiz disponible pour le moment.</h3>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -1,10 +1,13 @@
|
|||||||
<h1>Résultat</h1>
|
<h1>Résultat</h1>
|
||||||
<div class="resultat">
|
<div class="resultat">
|
||||||
<p> nombre de réponse juste : {{ score }}</p>
|
<p> nombre de réponse juste : {{ score }}</p>
|
||||||
<p> nombre de réponse fausse : {{ 10 - score }}</p>
|
<p> nombre de réponse fausse : {{ nb - score }}</p>
|
||||||
<a class="suiv" href="{{racine}}/quiz/{{ nextquiz }}" alt="quiz suivant">
|
<p> pourcentage de réusite : {{ (100 * score) / nb }}%<p>
|
||||||
|
|
||||||
|
<a class="suiv" href="{{racine}}/accueilQuiz" alt="Retour selection quiz">
|
||||||
<img src="../images/suivant.png" />
|
<img src="../images/suivant.png" />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -0,0 +1,12 @@
|
|||||||
|
<h1>Résultat</h1>
|
||||||
|
<div class="resultat">
|
||||||
|
|
||||||
|
<p> nombre de réponse juste : {{ score }}</p>
|
||||||
|
|
||||||
|
<a class="suiv" href="{{racine}}/accueilQuiz" alt="Retour selection quiz">
|
||||||
|
<img src="images/suivant.png" />
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
@ -0,0 +1,4 @@
|
|||||||
|
<h1 class='error'>Erreur</h1>
|
||||||
|
<p class="explanation">Erreur {{numero}} : {{context}}</p>
|
||||||
|
<body>
|
||||||
|
<html>
|
@ -1,9 +0,0 @@
|
|||||||
<div class="citation-container suggestion">
|
|
||||||
<img src="{{ imagePath }}" alt="{{ movie }}" class="citation-image">
|
|
||||||
<div class="text-content">
|
|
||||||
<p class="quote">"{{ quote }}"</p>
|
|
||||||
<p class="movie">- {{ movie }}</p>
|
|
||||||
<p class="character">Personnage : {{ character }}</p>
|
|
||||||
<p class="year">Année : {{ year }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
@ -1,25 +1,25 @@
|
|||||||
<h1>Quiz</h1>
|
<h1>Quiz</h1>
|
||||||
<div class="quiz">
|
<div class="quiz">
|
||||||
<h2> {{ question.question }} </h2>
|
<h2> {{ question.question }} </h2>
|
||||||
{#<a id="timer"> 10 seconds left .. </a>#}
|
|
||||||
|
|
||||||
<form id="quizForm" method="POST" >
|
<form id="quizForm" method="POST" >
|
||||||
<div class="answers">
|
<div class="answers">
|
||||||
<button class="answer" name="answera" value="A-{{ id }}">
|
<button class="answer" name="answera" value="{{ question.answera }}-{{ id }}">
|
||||||
{{ question.answera }}
|
{{ question.answera }}
|
||||||
</button>
|
</button>
|
||||||
<button class="answer" name="answerb" value="B-{{ id }}">
|
<button class="answer" name="answerb" value="{{ question.answerb }}-{{ id }}">
|
||||||
{{ question.answerb }}
|
{{ question.answerb }}
|
||||||
</button>
|
</button>
|
||||||
<button class="answer" name="answerc" value="C-{{ id }}">
|
<button class="answer" name="answerc" value="{{ question.answerc }}-{{ id }}">
|
||||||
{{ question.answerc }}
|
{{ question.answerc }}
|
||||||
</button>
|
</button>
|
||||||
<button class="answer" name="answerd" value="D-{{ id }}">
|
<button class="answer" name="answerd" value="{{ question.answerd }}-{{ id }}">
|
||||||
{{ question.answerd }}
|
{{ question.answerd }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<input type="hidden" name="action" value="canswer">
|
<input type="hidden" name="action" value="canswer">
|
||||||
</form>
|
</form>
|
||||||
|
<a id="timer">{{ nb }}/{{ nbFinal }}</a>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -0,0 +1,27 @@
|
|||||||
|
<h1>Quiz Random</h1>
|
||||||
|
<div class="quiz">
|
||||||
|
<h2> {{ question.question }} </h2>
|
||||||
|
|
||||||
|
<h3>Vie restante : {{ vie }}</h3>
|
||||||
|
|
||||||
|
<form id="quizForm" method="POST" >
|
||||||
|
<div class="answers">
|
||||||
|
<button class="answer" name="answera" value="{{ question.answera }}">
|
||||||
|
{{ question.answera }}
|
||||||
|
</button>
|
||||||
|
<button class="answer" name="answerb" value="{{ question.answerb }}">
|
||||||
|
{{ question.answerb }}
|
||||||
|
</button>
|
||||||
|
<button class="answer" name="answerc" value="{{ question.answerc }}">
|
||||||
|
{{ question.answerc }}
|
||||||
|
</button>
|
||||||
|
<button class="answer" name="answerd" value="{{ question.answerd }}">
|
||||||
|
{{ question.answerd }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" name="canswer" value="{{ question.canswer }}">
|
||||||
|
</form>
|
||||||
|
<a id="timer">{{ nb }}/∞</a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|