Question

我正在开发Ionic V1 MCQ测验应用程序，并正在寻找解决方案，以解决如何在测验测试页面上显示问题的问题。已经尝试过搜索Google，但没有找到完整的参考，然后决定在此处发布。在Google搜索上花了几个小时后，我知道ion-slide-box可能会实现，但不能100％确定。

这是我的要求-

我使用PHP / MySQL作为Rest API。所有问题只有MCQ，带有4个选项，如果用户点击/单击当前问题答案的任何一个选项，将通过其余API保存用户答案，然后转到下一个问题（随机播放）。当用户点击/单击最后一个问题选项应用并导航至结果页面$ state.go（app.finish）。

我通过PHP Rest API获得的示例问题JSON数据-

[
    {
      "id":"1",
      "title":"Grand Central Terminal, Park Avenue, New York is the world's",
      "options":
            [
              {"value": "largest railway station","iscorrectans":true},
              {"value": "highest railway station","iscorrectans":false},
              {"value": "longest railway station","iscorrectans":false},
              {"value": "None of the above","iscorrectans":false}
            ]
    },
    {
      "id":"2",
      "title":"Eighteen thousandths, written as a decimal, is",
      "options":
            [
              {"value": "0.0018","iscorrectans":false},
              {"value": "0.018","iscorrectans":false},
              {"value": "0.18","iscorrectans":true},
              {"value": "18","iscorrectans":false}
            ]
    },
    {
      "id":"3",
      "title":"Eighteen thousandths, written as a decimal, is",
      "options":
            [
              {"value": "0.0018","iscorrectans":false},
              {"value": "0.018","iscorrectans":false},
              {"value": "0.18","iscorrectans":true},
              {"value": "18","iscorrectans":false}
            ]
    },
    {
      "id":"4",
      "title":"Eighteen thousandths, written as a decimal, is",
      "options":
            [
              {"value": "0.0018","iscorrectans":false},
              {"value": "0.018","iscorrectans":false},
              {"value": "0.18","iscorrectans":true},
              {"value": "18","iscorrectans":false}
            ]
    },
    {
      "id":"5",
      "title":"Eighteen thousandths, written as a decimal, is",
      "options":
            [
              {"value": "0.0018","iscorrectans":false},
              {"value": "0.018","iscorrectans":false},
              {"value": "0.18","iscorrectans":true},
              {"value": "18","iscorrectans":false}
            ]
    }
  ]

Answer 1

我在使用css transform属性的angularjs中为您提供了一个小示例，您可以使用angular-animate来做得更好，但这是您项目的基础，您可以选择答案，增加分数，更改问题并有结果页。

您不需要离子滑盖箱即可完成所需的操作。

example

Ionic v1-如何在ion-slide-box上显示动态测验问题并保存用户答案

1 个答案: