JSFiddle - React, Tailwind, and code Playground

by armyofda12mnkeys

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <button type="button" ng-click="getprevquestion()">Previous Question</button>
        <button type="button" ng-click="getnextquestion()">Next Question</button>
        <question currentquestion="currentquestion" getnextquestion="getnextquestion()" />
        
        
    </div>
</div>

JavaScript

var myApp = angular.module('myApp',[]);


myApp.controller("MyCtrl", function ($scope) {
    $scope.questions = [
        {
         qid: 'QS1', 
         text: 'What is your GPA?'
        },
        {
         qid: 'QS2', 
         text: 'What is your SAT scores?'
        },
        {
         qid: 'QS3', 
         text: 'What are your GMAT scores?'
        },
        {
         qid: 'QS_SEARCH', 
         text: 'One sec, searching for a matching college...'
        },
        {
         qid: 'QS_SUCCESS', 
         text: 'Found a match!'
        }
        
    ];
    $scope.current_question_index = 0;
    $scope.currentquestion = $scope.questions[ $scope.current_question_index ]; //starting off, show first question
        
    $scope.getprevquestion = function() {
        if($scope.current_question_index > 0 ) {
            $scope.current_question_index = $scope.current_question_index - 1
            $scope.currentquestion = $scope.questions[ $scope.current_question_index ];
        }
    };
    
    $scope.getnextquestion = function() {
        if($scope.current_question_index < $scope.questions.length-1 ) {
            $scope.current_question_index = $scope.current_question_index + 1
            $scope.currentquestion = $scope.questions[ $scope.current_question_index ];
        }
    };
    
    
});
myApp.directive('question', [function () {
  return {
    restrict: 'EA',
    scope: {
        currentquestion: '=', //two-way data binding,
        getnextquestion: '&' //pass in the function to autosubmit, used for certain questions
    },
    controller: function ($scope, $timeout) {
               
        $scope.$watch('currentquestion', function(newvalue){
            console.log('visiting question:'+ $scope.currentquestion.qid);    
            //autosubmit the for this special question after 3 seconds
            if($scope.currentquestion.qid == 'QS_SEARCH') {
                console.log('TIMEOUT: FUNC WILL START IN 3s');
               ...