In the process of creating a quiz engine using angularjs, I have successfully loaded questions with options and implemented the NEXT and BACK buttons. However, I am facing a challenge with pre-selecting the previously chosen option when the user clicks the BACK or NEXT button after answering a question.
For each question, there are 4 options, and I am using a property called 'IsSelected' on the choices to track the user's previous selection.
I am trying to ensure that when users are reviewing their answers, the previously selected option should be automatically checked by default. This is where I am currently stuck. I have come across a similar question that discusses setting a default value for an Angular JS Radio Button:
Need to Default select an Angular JS Radio Button which provides some guidance on setting default values, although not exactly for this scenario.
HTML Code:
<div class="col-lg-offset-2 col-lg-5" data-ng-repeat="item in items" style=" border:#000 1px solid;padding:10px 40px 40px 40px">
<h3 style="color: #0000ff">Question <b style="color:red">{{item.QId}}</b> of <b style="color:green">{{item.QCount}}</b></h3>
<div>
<!--<div id="first">{{item.QId}}</div>-->
<h2>{{item.QId}}. {{item.QText}} </h2>
</div>
<div data-ng-repeat="choice in item.AnswerCh">
<input type="radio" name="choize" data-ng-model="choice.IsSelected" value="choice.IsSelected" /> {{choice.Text}}
</div>
<br />
<div id="ref" style="display: none">{{item.QId}}</div>
<div id="you">{{choice.choize.Text}}</div>
JS Code:
$scope.getNext = function () {
var quet = $('#ref').html();
var answ = $('#you').html();
cbtFact.getNext().update({q:answ,v:quet },
function (data, status, headers, config){
$scope.items = [];
$scope.items = data;
},
function (data, status, headers, config) {
});
};
$scope.getPrevious = function () {
var quet = $('#ref').html();
var answ = $('#you').html();
cbtFact.getPrevious().update({ q: answ, v: quet },
function (data, status, headers, config) {
$scope.items = [];
$scope.items = data;
function (data, status, headers, config) {
});
};