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

Question

我正在尝试使用 amp-html 构建交互式测验。测验只有 3 个问题，A、B、C、D 选项。通过使用 amp-selector，我可以看到用户选择了哪个选项(A、B、C 或 D)，这要归功于添加到元素中的附加 selected 类。因此，对于每个单独的测验，我的设置应该没有问题。

但是，一旦用户选择完所有 3 个问题，我就想知道答案，但我很难找到一种方法来汇总问题的所有答案。

如果我能够使用 javascript 做到这一点，这显然并不困难，但仅限于 amp-components 我不确定如何执行计算答案的最后一步。

提前致谢。

Answer 1

您有两个选择:

1. 将所有问题放入一个表格中。提交后，您可以将从服务器返回的结果直接呈现到 AMP 页面中。 This sample演示如何执行此操作。

2. 使用 amp-bind 评估客户端的问题。这个想法是将选定的答案写入 amp-state，然后根据 amp-state 计算聚合答案。

这是一个简单的示例(查看实际操作 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>