説明例
In this example, we create a quiz that randomly chooses 5 questions from a collection. Once the site visitor answers all the quiz questions and submits them, we validate their answers, show the correct answer for each question, and display the final score.
どのように構築したか
コレクション
We created a Questions collection that stores all of the questions and the visitors' answers.
ページ要素
We added the following elements:
3 text elements: for welcoming site visitors and showing the score.
2 buttons: start quiz button and submit button.
Repeater: contains the questions and their possible answers. After submission the repeater also contains the correct answer for each question and text indicating whether the visitor’s answer was correct or incorrect.
Backend Code
We added the questions.jsw web module to get information about the questions and answers from the Questions collection:
getAllQuestions(): a function that queries the collection and returns all of its items.
getRandomQuestions(): a function that receives a variable indicating how many questions it should return. The function calls the getAllQuestions() function to get all questions and returns the specified number of randomly selected questions.
ページコード
In the $w.onReady function we initiate the buttons' onClick event handlers.
When the site visitor clicks the Start Quiz button we get 5 random questions using the getRandomQuestions() function and bind them to the repeater's data.
When clicking the submit button we first validate that the site visitor has answered all the quiz questions. If so we validate the answers.
We compare each answer with the correct answer we got from the quiz data and show a message letting the visitor know if each answer is correct or not.
We also evaluate the visitor’s score, adding 20 points for each correct answer.
関連例
これは役に立ったか？
|
ご意見ありがとう！
国のオートコンプリート
入力中に自動的に国名を補完します。キーボードを使用して、必要な国を選択します。
中級
ギフト・クイズ
クイズやおすすめ商品で、お客さまが完璧なギフトを見つけられるようお手伝いします。
中級
ページの状態を維持する
動的なページに移動している間、リピーターの状態を維持する。
中級