Search code examples
javascriptamp-html

Computing elements for an interactive quiz in amp-html

I'm trying to build an interactive quiz with amp-html. The quiz would be just 3 questions with A, B, C and D as choices. By using amp-selector I can see which option (A, B, C or D) a user selects thanks to the additional selected class that's added to the element. So each quiz individually, I should have no problem setting it up.

However, once the user finishes selecting all 3 questions I want to have a reveal, but I am having difficulty finding a way to aggregate all the answers to the questions.

If I were able to do this with javascript, this would not be difficult obviously, but being limited to amp-components I'm not sure how to execute the last step of computing the answers.

Thanks in advance.

Solution

  • You have two options:

    1. Put all questions into a single form. Once submitted, you can render the result returned from your server directly into the AMP page. This sample demonstrates how to do this.

    2. Evaluate the questions client side using amp-bind. The idea is to write the selected answers to amp-state and then calculate the aggregate answer based on the amp-state.

    Here is a simple example (see it in action here):

    <h2>Whats 1 + 1?</h2>
<amp-selector layout="container" on="select:AMP.setState({question1: event.targetOption})">
  <div option="a">1</div>
  <div option="b">2</div>
  <div option="c">3</div>
</amp-selector>
<h2>What's 1*1?</h2>
<amp-selector layout="container" on="select:AMP.setState({question2: event.targetOption})">
  <div option="a">1</div>
  <div option="b">2</div>
  <div option="c">3</div>
</amp-selector>

<div hidden [hidden]="!question1 || !question2">
  <div hidden [hidden]="question1 != 'b' || question2 != 'a'">
    Yay! All answers correct.
  </div>
  <div hidden [hidden]="question1 == 'b' && question2 == 'a'">
    Wrong answer! Please try again.
  </div>
</div>