Fonction de réponse aux questions en ligne implémentée par jQuery

Fonction de réponse aux questions en ligne implémentée par jQuery_jquery

WBOY

Libérer： 2016-05-16 16:04:36

original

2108 Les gens l'ont consulté

Parfois, il est nécessaire d'ajouter une fonction de test en ligne à la page Web, telle que des enquêtes en ligne, des tests en ligne de diverses connaissances et d'autres applications. De telles applications nécessitent l'utilisation de nombreuses compétences front-end et back-end. Aujourd'hui, je vais partager avec vous une application frontale basée sur jQuery testant la fonction de réponse aux questions.

HTML

Chargez d'abord le fichier de bibliothèque jquery et quiz.js ainsi que le fichier de style CSS requis styles.css.

<script src="jquery.js"></script> 
<script src="quiz.js"></script> 
<link rel="stylesheet" href="styles.css" />

Copier après la connexion

Ensuite, ajoutez div#quiz-container où les questions du test doivent être placées.

Copier le code Le code est le suivant :

jQuery

Tout d'abord, nous définissons les options de question et de réponse. La question est la question, les réponses sont les options de réponse et correctAnswer est la bonne réponse. On peut voir que l'initialisation définie est un format de données json.

Copier le code Le code est le suivant :

var init={'questions':[{'question':'Qu'est-ce que jQuery ? ','answers':['Bibliothèque JavaScript','Bibliothèque CSS','Framework PHP','Aucune des réponses ci-dessus'],'correctAnswer':1},{'question':'Trouver un élément de différentes catégories ? ','answers':['bureau','canapé','TV','nappe'],'correctAnswer':3},{'question':'Le pays avec la plus grande superficie est :',' Answers': ['États-Unis','Chine','Russie','Canada'],'correctAnswer':3},{'question':'À quelle distance se trouve la Lune de la Terre ? ','réponses':['180 000 kilomètres','380 000 kilomètres','1 million de kilomètres','1,8 million de kilomètres'],'correctAnswer':2}]};

Ensuite, nous appelons directement la méthode du plug-in fournie par quiz.js, puis ouvrons la page pour voir qu'un projet de test en ligne a été généré sur la page.

$(function(){ 
  $('#quiz-container').jquizzy({ 
    questions: init.questions 
  }); 
});

Copier après la connexion

Ainsi, si vous souhaitez modifier la disposition du style des questions de test personnalisées, vous pouvez apporter les modifications appropriées dans les fichiers quiz.js et styles.css.

Questions
À ce stade, les amis prudents découvriront que le problème arrive : 1. Est-il dangereux de marquer directement la bonne réponse à la question dans le code js ? Si la réponse à un projet de test formel doit être déterminée en arrière-plan pour empêcher quelqu'un de consulter le code source pour obtenir directement la bonne réponse.
2. Comment interagir avec l’arrière-plan ? Par exemple, vérifiez l'identité avant de répondre aux questions du test et envoyez les résultats au backend après avoir répondu aux questions.
Ce que je veux dire, c'est qu'il s'agit d'un projet de démonstration de code front-end. Les vraies réponses de l'application n'apparaîtront pas dans le code front-end ; quiz.js a déjà une interface pour interagir avec l'ajax en arrière-plan. Dans les articles suivants. Introduction, j'ai déjà pensé au titre de l'article : Comment utiliser jQuery PHP MySQL pour implémenter un projet de test en ligne, alors restez à l'écoute.

Voir la démo Télécharger le code source

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.