amp-html中交互式测试的计算元素

Question

我试着用amp-html构建一个交互式的测试。测验将是三个问题，以A，B，C和D为选择。通过使用amp-selector，我可以看到用户选择哪个选项(A、B、C或D)，这要感谢添加到元素中的附加selected类。所以每一个测试，我应该没有问题，设置它。

然而，一旦用户完成选择所有三个问题，我想有一个揭示，但我有困难找到一个方法，以汇总所有问题的答案。

如果我能够使用javascript完成这一任务，这显然并不困难，但由于仅限于amp-components，我不知道如何执行计算答案的最后一步。

提前谢谢。

Answer 1

你有两个选择：

1. 把所有的问题都放在一个单一的形式上。提交后，您可以将从服务器返回的结果直接呈现到AMP页面。这个样本演示了如何做到这一点。
2. 使用amp-bind评估客户端的问题。其思想是将选定的答案写入放大器状态，然后根据放大器状态计算汇总答案。

下面是一个简单的示例(参见实际的这里)：

<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>