JSFiddle - React, Tailwind, and code Playground

by jarnal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app='quizWiz'>
  <h2>Quiz</h2>
  <div ng-controller="QuestionCtrl">
  
      <ul rename-this-class="unstyled" >
      <li ng-init="editmode=false" ng-repeat="question in questions">
          <span  ng-click="editmode=true" ng-hide="editmode">{{question.text}}</span> 
          <input ng-show="editmode" ng-model="question.text" blur="editmode=false"> </input>
          <span>[<a href ng:click="deleteQuestion($index)">X</a>]</span>
          <ul >
              <li ng-repeat="option in question.options">
                  <button  ng-click="question.selectedOption=option"  ng-disabled="question.selectedOption"  >{{option}}</button>
                  
                 
              </li>
          </ul>
          <div ng-show="question.selectedOption">
           <span>Result:{{question.result()}}</span>
              <span>Answer:{{question.answer}}</span>
              <span>Selected:{{question.selectedOption}}</span><br>
              <span> Explanation:{{question.explanation && question.explanation || 'None provided' }}</span>
          </div>
      </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="Answer Option1">    <input type="radio" value="{{optionText1}}" ng-model="answer"><br>
 <input type="text" ng-model="optionText2"  size="80"
             placeholder="Answer Option2">    <input type="radio" value="{{optionText2}}" ng-model="answer"><br>
       <input type="text" ng-model="explanation"  size="80"
             placeholder="Explanation"><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

angular.module('quizWiz',[]).directive('blur', function () {
    return function (scope, elem, attrs) {
        elem.bind('blur', function () {
            scope.$apply(attrs.blur);
        });
    };
});





function QuestionCtrl($scope) {
    
    var question = function (text,options,answer,explanation) {
        this.text =text;
        this.options=options;
        this.answer=answer;
        this.explanation=explanation;
        this.selectedOption=null;
        };
    
    question.prototype.result=function(){
        if (this.selectedOption == null) {return 'Not Attempted';} else
        if (this.selectedOption == this.answer) {return 'Correct!'} else
        {return 'Wrong!'}; 
        };
    
    
    var q1= new question('What is angular?', ['option1','option2'], 'option1', 'explain1');
    var q2=new question('Who made Javascript?', ['optionA','optionB'] ,'optionB' , 'explain2');
    $scope.questions = [q1,q2];
    
    
    
    //$scope.questions = [{text:'What is angular?', options:['option1','option2'], answer:'option1', result:'Not attempted', attempted:false, explanation:'explain1'},{text:'Who made Javascript?', options:['option1','option2'], answer:'option2' , result:'Not attempted', attempted:false, explanation:'explain1'} ];
    
    //$scope.questions=[new question('What is angular?', ['option1','option2'], 'option1', 'explain1'), new question(text:'Who made Javascript?', ['option1','option2'], 'option2' , 'explain2') ];
    // $scope.questions.push(new question('What is angular?', ['option1','option2'], 'option1', 'explain1'));   
    //$scope.questions.push(new question(text:'Who made Javascript?', ['option1','option2'], 'option2' , 'explain2'));

    $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...