feat: Pop up ajout autre question + verif champs vide + Page choixThemeSolo
continuous-integration/drone/push Build is passing Details

tests
yvan.calatayud 2 years ago
parent 0b6b7f3996
commit 7bf7d8af14

@ -0,0 +1,21 @@
// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()

@ -7,6 +7,7 @@
<title>Math'Educ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
@font-face {
font-family: 'MenuFont';
@ -21,34 +22,64 @@
<body style="background-image: url('Media/background.jpg'); background-size:cover;">
<div class="d-flex flex-column align-items-center justify-content-center" style="height:85vh">
<form action="traitementAjout.php" method="post">
<form class="row g-3 needs-validation" action="traitementAjout.php" method="post" novalidate>
<div class=" container text-center d-flex flex-column align-items-center text-center flex-grow fs-2">
<label for="question">Question:</label>
<textarea id="question" name="question" rows="4" cols="50"></textarea>
<textarea class="form-control" id="question" name="question" rows="4" cols="50" required></textarea>
<div class="invalid-feedback">
Please provide a valid question.
</div>
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow">
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
<label for="reponse1">Réponse 1:</label>
<textarea id="reponse1" name="reponse1" rows="1" cols="50"></textarea>
<textarea id="reponse1" name="reponse1" rows="1" cols="50" required></textarea>
<div class="invalid-feedback">
Please provide a valid answer.
</div>
</div>
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
<label for="reponse2">Réponse 2:</label>
<textarea id="reponse2" name="reponse2" rows="1" cols="50"></textarea>
<textarea id="reponse2" name="reponse2" rows="1" cols="50" required></textarea>
<div class="invalid-feedback">
Please provide a valid answer.
</div>
</div>
</div>
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow">
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
<label for="reponse3">Réponse 3:</label>
<textarea id="reponse3" name="reponse3" rows="1" cols="50"></textarea>
<textarea id="reponse3" name="reponse3" rows="1" cols="50" required></textarea>
<div class="invalid-feedback">
Please provide a valid answer.
</div>
</div>
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
<label for="reponse4">Réponse 4:</label>
<textarea id="reponse4" name="reponse4" rows="1" cols="50"></textarea>
<textarea id="reponse4" name="reponse4" rows="1" cols="50" required></textarea>
<div class="invalid-feedback">
Please provide a valid answer.
</div>
</div>
</div>
<div class="container text-center d-flex flex-row align-items-center text-center flex-grow">
<div class="container text-center d-flex flex-column align-items-center text-center flex-grow">
<label for="theme" class="form-label">Themes</label>
<select id="theme" name="theme" required>
<option selected disabled value=""></option>
<option>Theme1</option>
<option>Theme2</option>
<option>Theme3</option>
</select>
<div class="invalid-feedback">
Please select a valid theme.
</div>
</div>
</div>
<input class="m-5" type="submit" value="ajouter" style="background-color:green;">
</div>
</form>
</div>
<script src="js/script.js"></script>
</body>
</html>

@ -7,6 +7,8 @@
<title>Math'Educ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
@font-face {
font-family: 'MenuFont';
@ -83,6 +85,25 @@
<div class="d-flex justify-content-center fs-3" style="height:10vh;">
<button style="width:10vw;background-color:red;">annuler</button>
<button style="width:10vw;background-color:green;">Valider</button>
<button style="width:10vw;background-color:green;" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Valider</button>
</div>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Question ajoutée</h1>
<!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
</div>
<div class="modal-body">
Voulez vous ajouter une autre question ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Non</button>
<button type="button" class="btn btn-success">Oui</button>
</div>
</div>
</div>
</div>
</body>

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Maths Educ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<style>
@font-face {
font-family: 'MenuFont';
src: url('Media/mathEducFont.ttf') format('truetype');
}
* {
font-family: 'MenuFont';
}
</style>
</head>
<body style="background-image: url('Media/background.jpg'); background-size:cover;">
<div class="text-center" style="padding-top: 30vh">
<h1 style="color: white; font-size: 50px">Difficulte :</h1>
<input type="radio" class="btn-check" name="difficulte" id="facile" autocomplete="off" checked>
<label class="btn btn-outline-success fs-1" for="facile" style="margin-right: 20px">Facile</label>
<input type="radio" class="btn-check" name="difficulte" id="moyen" autocomplete="off">
<label class="btn btn-outline-warning fs-1" for="moyen" style="margin-right: 20px">Moyen</label>
<input type="radio" class="btn-check" name="difficulte" id="difficulte" autocomplete="off">
<label class="btn btn-outline-danger fs-1" for="difficulte">Difficile</label>
</div>
<div class="dropdown d-flex flex-column align-items-center p-5">
<button class="btn btn-secondary dropdown-toggle btn-lg fs-1" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Theme
</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item fs-1" type="button">Theme1</button></li>
<li><button class="dropdown-item fs-1" type="button">Theme2</button></li>
<li><button class="dropdown-item fs-1" type="button">Theme3</button></li>
</ul>
</div>
<div class="d-flex flex-column align-items-center">
<button type="button" class="btn btn-success btn-lg fs-1" >Jouer</button>
</div>
</body>
</html>
Loading…
Cancel
Save