Question

我正在尝试使用amp-html构建交互式测验。测验只有3个问题，A，B，C和D作为选择。通过使用amp-selector，我可以看到用户选择了哪个选项（A，B，C或D），这要归功于添加到元素中的其他selected类。所以每个测验都是单独的，我应该没有问题进行设置。

然而，一旦用户完成了我想要显示的所有3个问题的选择，但我很难找到一种方法来汇总问题的所有答案。

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

提前致谢。

Answer 1

您有两种选择：

将所有问题都放在一个表格中。提交后，您可以将服务器返回的结果直接呈现在AMP页面中。 This sample演示了如何执行此操作。
使用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>

在amp-html中进行交互式测验的计算元素

1 个答案: