Von jQuery_jquery implementierte Online-Fragebeantwortungsfunktion-js-Tutorial-php.cn

Von jQuery_jquery implementierte Online-Fragebeantwortungsfunktion

WBOY

Freigeben： 2016-05-16 16:04:36

Original

2108 Leute haben es durchsucht

Manchmal ist es notwendig, der Webseite eine Online-Testfunktion hinzuzufügen, z. B. Online-Umfragen, Online-Tests verschiedener Kenntnisse und andere Anwendungen. Solche Anwendungen erfordern den Einsatz vieler Front-End- und Back-End-Kenntnisse. Heute werde ich Ihnen eine Front-End-Anwendung vorstellen, die auf jQuery basiert und die Frage-Antwort-Funktion testet.

HTML

Laden Sie zunächst die JQuery-Bibliotheksdatei und quiz.js sowie die erforderliche CSS-Stildatei „styles.css“.

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

Nach dem Login kopieren

Dann fügen Sie div#quiz-container hinzu, wo die Testfragen platziert werden müssen.

Code kopieren Der Code lautet wie folgt:

jQuery

Zuerst definieren wir die Frage- und Antwortoptionen. Frage ist die Frage, Antworten sind die Antwortoptionen und richtige Antwort ist die richtige Antwort. Es ist ersichtlich, dass es sich bei der definierten Init um ein JSON-Datenformat handelt.

Code kopieren Der Code lautet wie folgt:

var init={'questions':[{'question':'Was ist jQuery? ','answers':['JavaScript-Bibliothek','CSS-Bibliothek','PHP-Framework','Keines der oben genannten'],'correctAnswer':1},{'question':'Ein Element in verschiedenen Kategorien finden? ','answers':['Schreibtisch','Sofa','TV','Tischdecke'],'correctAnswer':3},{'question':'Das Land mit der größten Landfläche ist:',' Antworten': ['Vereinigte Staaten','China','Russland','Kanada'],'correctAnswer':3},{'question':'Wie weit ist der Mond von der Erde entfernt? ','answers':['180.000 Kilometer','380.000 Kilometer','1 Million Kilometer','1,8 Millionen Kilometer'],'correctAnswer':2}]};

Als nächstes rufen wir direkt die von quiz.js bereitgestellte Plug-in-Methode auf und öffnen dann die Seite, um zu sehen, dass auf der Seite ein Online-Testprojekt generiert wurde.

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

Nach dem Login kopieren

Wenn Sie also das Layout des benutzerdefinierten Testfragestils ändern möchten, können Sie entsprechende Änderungen in den Dateien quiz.js und style.css vornehmen.

Fragen
An diesem Punkt werden aufmerksame Freunde feststellen, dass das Problem kommt: 1. Ist es unsicher, die richtige Antwort auf die Frage direkt im JS-Code zu markieren? Ob die Antwort auf ein formelles Testprojekt im Hintergrund ermittelt werden soll, um zu verhindern, dass sich jemand den Quellcode ansieht, um direkt die richtige Antwort zu erhalten.
2. Wie interagiere ich mit dem Hintergrund? Überprüfen Sie beispielsweise die Identität, bevor Sie die Testfragen beantworten, und senden Sie die Ergebnisse nach der Beantwortung der Fragen an das Backend.
Was ich sagen möchte ist, dass dies ein Front-End-Code-Demonstrationsprojekt ist. Die tatsächlichen Anwendungsantworten werden nicht im Front-End-Code angezeigt. quiz.js verfügt tatsächlich bereits über eine Schnittstelle für die Interaktion mit Hintergrund-Ajax In den folgenden Artikeln habe ich bereits über den Titel des Artikels nachgedacht: Wie man mit jQuery PHP MySQL ein Online-Testprojekt implementiert, also bleiben Sie dran.

Demo ansehen Quellcode herunterladen

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.