Bind the index and ionic card together - ionic - html

Question

I am doing a project on ionic. It is a quiz type app. I have scrollable div on the top which contains all the question numbers. Below that I have cards where questions are appearing. The screenshot is below :
The cards have swipable feature in it that users can swipe the cards to and fro.
My requirement is when the user selects a particular question from the top question number panel, corresponding questions should show and the selected question should be highlighted. Also when the user swipes the cards, the selection of the question numbers in the top should also change.
I created a circle using css for the above panel and using ng-repeat, I am repeating the question numbers. I added a ng-click option on the question number and passing the index. So that I can show the corresponding question. By using this I am able to bind the both panels in one way. I need to bind it reverse too. So that when user swipes the card, the question number should change.
Also I need to highlight a particular item in ng-repeat to show that that is selected. I tried :hover property in css, it somehow highlighting the selected item but not as good as expected.
Here is my code:
angular.module('quiz', ['ionic'])
.controller('QuizController', function($scope) {
$scope.nodes = [{
count: 1,
disabled: false
}, {
count: 2,
disabled: false
}, {
count: 3,
disabled: false
}, {
count: 4,
disabled: false
}, {
count: 5,
disabled: true
}];
$scope.goToQuestionNumber = function(index) {
console.log('goToQuestionNumber: ', index);
$scope.currentQuestion = index;
$scope.act_type = $scope.quiz.clues[$scope.currentQuestion].act_type;
$scope.isActive = $scope.nodes[index];
changeTemplate();
}
$scope.next = function() {
if ($scope.currentQuestion != ($scope.nodes.length - 1)) {
$scope.currentQuestion++;
$scope.currentTry = 1;
$scope.act_type = $scope.quiz.clues[$scope.currentQuestion].act_type;
$scope.failureResult = false;
changeTemplate();
}
}
$scope.prev = function() {
if ($scope.currentQuestion != 0) {
$scope.additionalActivity = false;
$scope.addtionalQuestionAvailability = false;
console.log('Left swipe');
$scope.currentQuestion = $scope.currentQuestion - 1;
$scope.currentTry = 1;
$scope.act_type = $scope.quiz.clues[$scope.currentQuestion].act_type;
$scope.failureResult = false;
changeTemplate();
}
}
})
.events {
position: relative;
}
.event,
span .event,
.event span {
content: "";
float: left;
position: relative;
padding: 3%;
margin: 0% 2% 0% 2%;
border-radius: 50%;
background-color: lightgrey;
border: 3px solid darkgray;
top: 15%;
left: 2%;
font-size: 15px;
z-index: 1;
text-align: center;
line-height: 150%;
color: hotpink;
}
.slider-column {
position: relative;
display: flex;
flex: 0 0 30%;
}
.slider-column::after {
content: '';
height: 3px;
width: 100%;
background-color: #66a3ff;
position: absolute;
top: 45%;
z-index: -5;
margin-left: 0%;
border-radius: 1% 1% 1% 1%;
padding: 1%;
}
.slider-column:last-child:after {
content: '';
height: 2%;
width: 100%;
background-color: transparent;
position: absolute;
top: 30%;
}
/*.event::after{
content:'';
height:3px;
width:170%;
background-color:#6d6dff;
position: absolute;
top: 45%;
z-index: -5;
margin-left: 55%;
border-radius: 1% 1% 1% 1%;
padding: 1%;
}*/
.event::before {
content: '';
height: 5px;
width: 100%;
background-color: transparent;
position: absolute;
top: 30%;
z-index: -5;
padding-left: 10%;
}
.events:first-child:before {
content: '';
height: 5px;
width: 100%;
background-color: transparent;
position: absolute;
top: 30%;
}
.events:last-child-1:after {
content: '';
height: 5px;
width: 100%;
background-color: transparent;
position: absolute;
top: 30%;
}
.timeline-text {
z-index: 4;
top: 0;
bottom: 5px;
}
.enabled-event {
background: red;
}
.event:hover {
border-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.0/js/ionic.bundle.min.js"></script>
<ion-content ng-app="quiz" ng-controller="QuizController">
<div style="padding-top:10px;padding-left:5px;">
<label class="hamburger" style="float:left">Score:{{totalPoints}} pts</label>
<button style="float:right" class="button button-clear button-small bonus-button" ng-click="bonus()">Try Bonus</button>
</div>
<br>
<br>
<ion-scroll direction="x" class="timeline-scroll">
<div class="timeline">
<div class="events row">
<div class="slider-column" ng-repeat="count in nodes">
<span class="event " ng-click="goToQuestionNumber($index)" ng-if="!count.disabled">
{{count.count}}/{{nodes.length}}
</span>
<span class="event" ng-click="goToQuestionNumber($index)" ng-if="count.disabled">
{{count.count}}/{{nodes.length}}
<!-- </span> -->
</div>
</div>
</div>
</ion-scroll>
<br>
<br>
<div ng-include="currentClueTemplate" ng-swipe-right="prev()" ng-swipe-left="next()" class="question-card"></div>
</ion-content>
Can anyone help me ?