0

I'm building a multiple-choice question web app. There are 5 options for every question. Before a button is clicked it has a default button class: btn btn-default. At the moment I have it so that when a choice is made, all the buttons are deactivated and a div appears where an explanation of the answer is meant to populate.

When a correct answer is selected I want to change the button class to btn btn-success, but if an incorrect answer is selected I want to change the incorrect selection to btn btn-danger and the correct answer to btn btn-warning.

Here's my controller:

    .controller('ChoiceCtrl',['$scope', '$http', function($scope, $http){
    $scope.choiceb = true;
    $scope.isDisabled = false;
    $scope.disableClick = function() {
        $scope.isDisabled = true;
        return false;
    }
}])

And here's my HTML:

    <div ng-controller="ChoiceCtrl">
    <div id="choices">

        <h3>Choose your answer:</h3>            
        <button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#01</button><br>
        <button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#02</button><br>
        <button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#03</button><br>
        <button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#04</button><br>
        <button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#05</button>

    </div>

    <div id="answer" class="choiceb" ng-if="myApp.choiceb"></div>

    <hr>

    <div id="rating">
        <h4>Rate this question:</h4>
        <h4 id="thumbs">
            <a href="#">
                <i class="glyphicon glyphicon-thumbs-up" id="voteup"></i>
            </a>
            <a href="#">
                <i class="glyphicon glyphicon-thumbs-down" id="votedown"></i>
            </a>
        </h4>
    </div>

    <button class="btn btn-primary pull-right choiceb" id="next-question" ng-if="myApp.choiceb">Next Question</button>

</div>

I've been able to use ng-class to change the correct answer to green, but haven't been able to get the incorrect answer to turn red while highlighting the correct answer in orange. Any help would be great. Thank you!

robertbabington
  • 189
  • 1
  • 2
  • 11

0 Answers0