I'm trying to select one or many of the 4 answers to a quiz based on which button ("Single Answer"/"Multiple Answers") is selected. The issue is that the checkbox is also behaving like radio (though its looking like a checkbox). I think its because I have the "value" attribute which makes it behave like a radio (only 1 item selected at a time).
<li class="list-group-item properties-sidebar">
<p>Correct Answer Type</p>
<div class="btn-group btn-group-justified" role="group" aria-label="Single, Multiple, or True/False?">
<div class="btn-group" role="group">
<button type="button" ng-class="{'btn btn-default': true, 'active': currentAnswerType === 'radio'}" ng-click="selectAnswerType(0)">Single</button>
</div>
<div class="btn-group" role="group">
<button type="button" ng-class="{'btn btn-default': true, 'active': currentAnswerType === 'checkbox'}" ng-click="selectAnswerType(1)">Multiple</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" ng-click="selectAnswerType(2)">True/False</button>
</div>
</div>
</li>
<li class="list-group-item properties-sidebar">
<p>Answer 1</p>
<div class="input-group"><span class="input-group-addon"><input type="{{currentAnswerType}}" ng-model="currentQuestion.correctAnswer" value="0" aria-label="..."></span>
<input type="text" class="form-control" placeholder="Enter Answer 1 here ..." aria-describedby="sizing-addon3" ng-model="currentQuestion.answers[0]">
</div>
</li>
<li class="list-group-item properties-sidebar">
<p>Answer 2</p>
<div class="input-group"><span class="input-group-addon"><input type="{{currentAnswerType}}" ng-model="currentQuestion.correctAnswer" value="1" aria-label="..."></span>
<input type="text" class="form-control" placeholder="Enter Answer 2 here ..." aria-describedby="sizing-addon3" ng-model="currentQuestion.answers[1]">
</div>
</li>
<li class="list-group-item properties-sidebar">
<p>Answer 3</p>
<div class="input-group"><span class="input-group-addon"><input type="{{currentAnswerType}}" ng-model="currentQuestion.correctAnswer" value="2" aria-label="..."></span>
<input type="text" class="form-control" placeholder="Enter Answer 3 here ..." aria-describedby="sizing-addon3" ng-model="currentQuestion.answers[2]">
</div>
</li>
<li class="list-group-item properties-sidebar">
<p>Answer 4</p>
<div class="input-group"><span class="input-group-addon"><input type="{{currentAnswerType}}" ng-model="currentQuestion.correctAnswer" value="3" aria-label="..."></span>
<input type="text" class="form-control" placeholder="Enter Answer 4 here ..." aria-describedby="sizing-addon3" ng-model="currentQuestion.answers[3]">
</div>
</li>
How can I get either radio or checkbox behavior based on whether the answer type is "radio" or "checkbox" (selected by pressing the appropriate button in the button group)
Aucun commentaire:
Enregistrer un commentaire