ionic test question

ionicte soru ve şıklardan oluşan test ekranını oluşturmaya çalışalım:




controller içerisine:

$scope.staticlist=function(){  
             $scope.$root.foydata = {"soru":[
                      {"id":"1","soru":"2015 Nobel Kimya ödülünü alan Türk Bilim adamı kimdir?",
                     "a":"Prof. Dr. Aziz Sancar",
                     "b":"Prof. Dr. Şemsettin Cemali",
                     "c":"Prof. Dr. Hayrettin Sakallı",
                     "d":"Zeki Demirkubuz",
                     "correct":"a"}] } ;


        $scope.getquestion($scope.$root.foydata.soru[0].id) ;   
        $scope.barcodeState=true;
      }


 $scope.getquestion=function( question_id)
   {
      $scope.$root.foydata.soru.forEach(function(dist) {
        if(dist.id==question_id)
        {

             $scope.$root.question=dist;
             return
        }

      });
      $scope.isquestion=true;
     }
    $scope.submitAnswer=function(user){
   
     $scope.colora="";
     $scope.colorb="";
     $scope.colorc="";
     $scope.colord="";

        if (user.answer=="a")
        {   if($scope.$root.question.correct=="a")
              {$scope.colora="green"; $scope.user_icon="icon ion-checkmark";}
              else
              {$scope.colora="red"; $scope.user_icon="icon ion-close";}          
        }
        else if(user.answer=="b")
        {
             if($scope.$root.question.correct=="b")
              {
                $scope.colorb="green"; $scope.user_icon="icon ion-checkmark";}
              else
              {
                $scope.colorb="red"; $scope.user_icon="icon ion-close";
            }      
        }
        else if (user.answer=="c")
        {
            if($scope.$root.question.correct=="c")
              {$scope.colorc="green";$scope.user_icon="icon ion-checkmark";}
               else
              {$scope.colorc="red"; $scope.user_icon="icon ion-close";}
        }
        else if (user.answer=="d")
        {
             if($scope.$root.question.correct=="d")
              {$scope.colord="green";$scope.user_icon="icon ion-checkmark";}
               else
              {$scope.colord="red"; $scope.user_icon="icon ion-close";}
        }
        else
        {
             $scope.colora="";
             $scope.colorb="";
             $scope.colorc="";
             $scope.colord="";
        }
    }



html arayüzümüz:

<ion-view >
  <ion-content>
  <ion-scroll direction="y" >
    <button class="button button-balanced button-block" ng-click="staticlist()">Soru Getir</button>
   <div class="card" ng-if="listState">



<div ng-show="isquestion">
 
   <br>

     {{$root.question.soru}}

    <hr>
   <ion-list>
    <ion-radio ng-model="user.answer" ng-value="'a'" class="ng-style: {color: colora};" ng-click="submitAnswer(user)" icon="{{user_icon}}" >
     A: {{$root.question.a}}

    </ion-radio>
    <ion-radio ng-model="user.answer" ng-value="'b'"  class="ng-style: {color: colorb};" ng-click="submitAnswer(user)" icon="{{user_icon}}" >
     B: {{$root.question.a}}
    </ion-radio>
    <ion-radio ng-model="user.answer" ng-value="'c'" class="ng-style: {color: colorc};" ng-click="submitAnswer(user)" icon="{{user_icon}}" >
         C: {{$root.question.c}}
    </ion-radio>
     <ion-radio ng-model="user.answer" ng-value="'d'" class="ng-style: {color: colord};" ng-click="submitAnswer(user)" icon="{{user_icon}}" >
         C: {{$root.question.d}}
    </ion-radio>
  </ion-list>


     <hr>

</div>

</div>
</ion-scroll>
  </ion-content>


</ion-view>









Çalıştırıp bakalım: