JSFiddle - React, Tailwind, and code Playground

by jarnal

HTML

<div ng-app>
  <h2>Quiz</h2>
  <div ng-controller="QuestionCtrl">
  
      <ul rename-this-class="unstyled" >
      <li ng-repeat="question in questions">
          <span>{{question.text}}</span>
          <ul >
              <li ng-repeat="option in question.options">
                  <button  ng-click="result=score( question.answer, option)"  ng-init="result='initial'" >{{option}}</button>
                  
                  <span>Result:{{result}}</span>
              </li>
          </ul>
              <span>Answer:{{question.answer}}<br>Result:{{result}}</span>
      </li>
    </ul>
    <form ng-submit="addQuestion()">
      <input type="text" ng-model="questionText"  size="80"
             placeholder="type new question here"><br>
 <input type="text" ng-model="optionText1"  size="80"
             placeholder="type Option1 here">    <input type="radio" value="{{optionText1}}" ng-model="answer"><br>
 <input type="text" ng-model="optionText2"  size="80"
             placeholder="type Option2 here">    <input type="radio" value="{{optionText2}}" ng-model="answer"><br>
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<style>

JavaScript

function QuestionCtrl($scope) {
  $scope.questions = [
      {text:'What is angular?', options:['option1','option2'], answer:'option1'},
      {text:'Who made Javascript?', options:['option1','option2'], answer:'option2'} ];

    $scope.test= function(e) {
        var elem = angular.element(e.target);
        //if elem.text()==question.answer)
        elem.css('background', 'blue');
        return question.answer;};
    
    $scope.evaluate = function(pindex, index){if ($scope.questions[pindex].answer==$scope.questions[pindex].options[index]) {return 'correct';} else {return 'incorrect';};};
    
    $scope.score = function( a,o){if (a==o) {return 'right';} else {return 'wrong'};
    //return a+o;
    };
    
  $scope.addQuestion = function() {
      $scope.questions.push({text:$scope.questionText,
                            //options:[$scope.optionText1, $scope.optionText2],
                             options:function(){
                                 arr=new Array();
                                 if ($scope.optionText1) arr.push($scope.optionText1);
                                 if ($scope.optionText2) arr.push($scope.optionText2);
                                 return arr;}(),
                             answer:$scope.answer});
    $scope.questionText = '';
      $scope.optionText1='';
      $scope.optionText2='';
      $scope.answer=null;                             
  };

  
 
}