Блог

Я работаю над приложением ionic v1 MCQ quiz и ищу решение для отображения вопросов на тестовой странице викторины. Уже пытался выполнить поиск через Google, но не нашел полной ссылки на него, тогда решил опубликовать здесь. Потратив несколько часов на поиск в Google, я узнаю, что это может быть возможно с ion-slide-box, но не уверен на 100%.

Вот мои требования —

Я использовал PHP / MySQL для Rest API. Все вопросы являются MCQ только с 4 вариантами, и если пользователь нажмет на любой из вариантов для текущего вопроса, ответ сохранит пользовательский ответ через rest API и перейдет к следующим вопросам (в случайном порядке). Когда пользователь нажимает на опцию последнего вопроса в приложении с переходом на страницу результатов $ state.go (app.finish).

Пример вопроса Данные JSON, которые я получаю через PHP Rest API —

 [
    {
      "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}
            ]
    }
  ]
  

Я сделал для вас небольшой пример в angularjs со свойством преобразования css, вы можете сделать лучше с angular-animate, но это основа для вашего проекта, вы можете выбрать ответ, увеличить оценку, изменить вопрос и получить страницу результатов.

Вам не нужен ion-slide-box, чтобы делать то, что вы хотите.

пример