JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<div ng-app="mcq">
  <div ng-controller="questionController">
    <p>
      {{questions[currentQuestion].question}}
    </p>
    <ul>
      <li ng-repeat="option in questions[currentQuestion].options">
        <label>
          <input type="radio" name="option" value="" ng-model="option.selected"/> {{option.optionTxt}}
        </label>
      </li>
    </ul>
    <button ng-click="currentQuestion=currentQuestion-1" ng-disabled="currentQuestion==0">Previous</button>
    <button ng-click="currentQuestion=currentQuestion+1" ng-disabled="currentQuestion==questions.length-1">Next</button>
    
  </div>
</div>

CSS

li {
  list-style: none;
}

JavaScript

angular.module('mcq', [])
  .controller('questionController', ['$scope', function($scope) {
    $scope.currentQuestion = 0;
    $scope.questions = [{
      "_id": "5958ebf01e23dbb0b72c9232",
      "question": "Anim qui veniam proident anim sit est reprehenderit duis labore et sunt mollit.",
      "options": [{
        "_id": "5958ebf0861d96fc319aa994",
        "optionTxt": "Officia dolor mollit laboris pariatur enim reprehenderit labore nostrud."
      }, {
        "_id": "5958ebf0e56a170d8ce3e371",
        "optionTxt": "Consectetur fugiat id eu magna incididunt consectetur aliqua mollit excepteur anim Lorem quis reprehenderit."
      }, {
        "_id": "5958ebf020b2c757e109d865",
        "optionTxt": "Ipsum cupidatat laborum et eu elit deserunt ipsum pariatur."
      }, {
        "_id": "5958ebf0a2e37255a658969a",
        "optionTxt": "Amet dolor aute incididunt adipisicing laborum sunt fugiat ipsum."
      }]
    }, {
      "_id": "5958ebf06aa35de1544f9c67",
      "question": "Cillum commodo exercitation est dolore sint duis exercitation nisi duis sit.",
      "options": [{
        "_id": "5958ebf09fa925d079d0907f",
        "optionTxt": "Magna incididunt quis ullamco magna ullamco commodo ipsum sunt minim sit."
      }, {
        "_id": "5958ebf0cb9ad596251f9cfe",
        "optionTxt": "Et esse et ex eu amet aliquip est proident laboris id reprehenderit ipsum tempor."
      }, {
        "_id": "5958ebf08d3a0c8ee241604e",
        "optionTxt": "Exercitation elit sint ea labore incididunt enim occaecat ex."
      }, {
        "_id": "5958ebf062a79af1d48be90d",
        "optionTxt": "Ut commodo adipisicing do voluptate sint aliquip qui dolore culpa dolor laboris est."
      }]
    }, {
      "_id": "5958ebf0ff47116706b33ff4",
      "question": "Officia ipsum deserunt et labore labore elit.",
      "options": [{
        "_id": "5958ebf0f7b576721d4dd894",
        "optionTxt": "Consectetur irure pariatur esse occaecat incididunt Lorem."
      }, {
        "_id":...