Se connecter / S'enregistrer

Résolu Creer Quiz HTML

Solutions (1)
Tags :
  • Array
  • Html
  • Créer son site Web
  • Php
, Maître Yoda |
Bonjour à tous !

Je suis confronté a un petit dilemme.
Je dois créer pour une association un quiz sur le thème infirmier.
J'ai les questions, les images ect....
Le quiz à été présenté dans un premier temps en PowerPoint.
Il a été approuvé cependant, ils veulent exactement la même chose que le ppt.

bref ...

j'arrive a créer un quiz sur une page avec le score en question.
Mais pour eux c'est trop basique.
Ils veulent 1 question 1 page.


La question s'affiche, on choisi une ou plusieurs réponses (bien sur sinon se n'est pas marrant) si c'est bon ok "bonne réponse" si faux la réponse apparaît et page suivant avec question 2.

J'ai beau chercher je n'arrive pas a trouver mon bonheur.
J'essaie de le faire sur une base HTML voir avec du php ( je pense que pour le comptage de point le php est incontournable non?). Après si vous me dite que c'est plus simple en JS ou autre pourquoi pas.
J'ai besoin d'un sacré coup de pouce.
Quelqu'un peut me venir en aide.en me donnant un exemple pour une question que je pourrais reproduire pour les autres SVP?

Merci d'avance pour votre aide.

Voici le fichier pptx pour avoir une vision du questionnaire.
http://demo.ovh.eu/fr/1a5eb41fe5a1e8353f61cf57a829ae93/



  • pipin-link a édité ce message
  • pipin-link a édité ce message
  • pipin-link a édité ce message
  • pipin-link a édité ce message
  • pipin-link a édité ce message
Contenus similaires
Meilleure solution
partage
, Administrateur |
Salut Pipin-Link,
En effet, pour ce genre de choses, un minimum de PHP est indispensable.
J'ai reporté ceci à plus tard plusieurs fois puis voyant que tu n'avais pas de réponse, je me suis dit que je n'allais pas te laisser dans la panade alors que je vois comment t'aider.


Le plus simple, sans passer par une database ou je ne sais quel chipotage, comme ton formulaire est réellement très simple, je préfère passer par la fonction serialize() qui permet de faire passer un array (un tableau de valeurs) par POST.

Du coup tu peux facilement garder le contenu de tes réponses d'une page à l'autre.

Je dois te mettre en garde cependant, pas de question ouverte avec ce type de méthode. Beaucoup trop dangereux. (ou alors arme-toi de htmlentities, etc. ...) je t'invite à consulter abondamment le manuel php sur la fonction ainsi le OpenClassrooms pour les manipuler comme il faut.


Donc voilà, un questionnaire que je viens de bricoler vite fait avec NOMBRE_QUESTIONS questions:

  1. <?php
  2. define('mail','tonmail@mail.com');
  3. // si besoin, les define se placent ici, les précédents sont facultatifs. Ceux nécessaires sont ici :
  4. define('CHEMIN_VUES','v/'); // DOSSIER OU SE TROUVENT TES QUESTIONS
  5. define('NOMBRE_QUESTIONS', 9); // VARIABLE QUI CONTIENT LE NOMBRE DE QUESTIONS, SI BESOIN D'EN AJOUTER
  6.  
  7.  
  8. define('PAGE', (isset($_POST['p'])) ? htmlentities($_POST['p']) : 0); // PAGE COURANTE
  9.  
  10. // require_once('c/QuizzController.php');
  11. //$controller = new Controller();
  12. //$controller->run(); // Si besoin, ta POO.
  13. $tableaucourant = array (isset($_POST['tableauscore']) ? unserialize(base64_decode($_POST['tableauscore'])) : array());
  14. $reponse = isset($_POST['reponse']) ? $_POST['reponse'] : 0; // ABSENCE de reponse = 0. Penses-y avant de fixer reponse = 0.
  15. if(PAGE != 0)
  16. $tableaucourant[PAGE-1] = $reponse;
  17. ?>
  18.  
  19. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  20. <html xmlns="http://www.w3.org/1999/xhtml">
  21. <head>
  22. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  23. <!-- Ici se trouve ton CSS
  24.  
  25. A MODIFIER PAR LE TIEN
  26. -->
  27. <link href="<?php echo CHEMIN_VUES . 'style.css' ; ?>" type="text/css" rel="stylesheet" />
  28. <!-- -->
  29.  
  30. <title>Questionnaire</title>
  31. </head>
  32.  
  33.  
  34. <body>
  35. <!--
  36.  
  37. Cette page contient uniquement le corps du site. Le questionnaire et les différentes étapes se trouveront dans le div "corps".
  38.  
  39.  
  40.  
  41. -->
  42.  
  43. <div id="corps">
  44. <?php
  45. if(PAGE==0)
  46. {require_once(CHEMIN_VUES.'exemplequestion.php');
  47. }elseif (PAGE <= NOMBRE_QUESTIONS){
  48. require_once(CHEMIN_VUES.PAGE.'.php');
  49. }
  50.  
  51. var_dump(PAGE); // c'est juste pour afficher les variables
  52. var_dump($tableaucourant); // tu peux supprimer faire un echo avec, c'est juste ce que j'ai mis pour tester
  53.  
  54. ?>
  55. </div>
  56.  
  57. </body>
  58. </html>



Et tes différentes questions, appelés exemplequestion pour la question 0 (libre à toi de changer ça), et 1, 2, 3... .php pour toutes les autres.

  1. <div>
  2. <form action="index.php" method="post" name="<?php echo "Q" . PAGE ; ?>">
  3. <!-- ne pas modifier celui-ci --><input type="hidden" name="p" value="<?php echo PAGE+1; ?>">
  4. <input type="hidden" name="tableauscore" value="<?php echo base64_encode(serialize($tableaucourant)); ?>">
  5.  
  6. <!-- Question ici -->
  7. <input type="number" name="reponse" value="0">
  8.  
  9. <!-- Bouton pour sortir -->
  10. <input type="submit" value="Soumettre">
  11. </form>
  12. <?php
  13. var_dump($tableaucourant); // pareil, pour les tests, libre à toi d'effacer
  14. ?>
  15. </div>



et dans ta dernière question, tu trouveras les différentes valeurs de réponses dans $tableauscore[0], $tableauscore[1], etc. ...
Par exemple avec une boucle.
Et ceci, dans la page de ta dernière question (dans ton cas, la page 8 contiendra ta dernière question (n°9), donc sur la page 9.php)
d'où le PAGE <= NOMBRE_QUESTIONS. avec page commençant à 0. Le dernier est réservé au traitement de données.

Note bien qu'il ne peut pas y avoir de réponse = 0, c'est ce que j'ai prévu de mettre en cas d'absence de réponse, parce que je suis pas sûr qu'il aime bien la réponse -1 en l'état (pas testé, mais amuse-toi!)


Bonne journée!

  • Dreamcaster a sélectionné cette solution comme la meilleure réponse
  • Xiiime a édité ce message
  • Xiiime a édité ce message
  • Xiiime a édité ce message
  • Xiiime a édité ce message
  • Xiiime a édité ce message
  • Xiiime a édité ce message
  • Xiiime a édité ce message
  • Commenter cette solution |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS