<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="container" class="container-fluid">
<div class="row-fluid">
<div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 audio-block">
<img class="pull-right btn no-padding" src="assets/images/audio-btn.svg" width="8%" />
<audio src="assets/images/kriyakalap-mix.mp3" autoplay="autoplay"></audio>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 text-center options-block w3-container w3-center w3-animate-zoom" >
<div class="disp-inblock pos-rel full-width correct" *ngFor="let opts of myoption">
<span (click)="selected(opts)" >
<img class="btn btn1 no-padding options" src="{{opts.imgsrc}}" /><br />
<img class="{{opts.class}} w3-animate-fading" src="{{opts.tick}}" width="30%" [style.display]="opts.hideElement?'inherit':'none'" />
</span>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 nav-block">
<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2">
<img class="btn no-padding" src="assets/images/peechay-btn.svg" width="20%" (click)="previous()"/>
<img (click)="clicked0($event)" class="pull-right btn no-padding" src="assets/images/aagay-btn.svg" width="20%" (click)="next()"/>
</div>
</div>
</div>
</div>
Structure.json -> json by which data is loading
{
"structure": {
"type": "1",
"data": [
{
"optionslist" : [
[
{ "imgsrc":"assets/content2/opt-185-d.svg",
"class": "tick-false","tick":"assets/content2/tick_false.png",
"sound":"assets/content2/Q1WrongAns1.mp3",
"correct1" : false,
"hideElement":false},
{ "imgsrc":"assets/content2/opt-175-d.svg",
"class": "tick-false","tick":"assets/content2/tick_false.png",
"sound":"assets/content2/Q1WrongAns1.mp3",
"correct1" : false,
"hideElement":false},
{ "imgsrc":"assets/content2/opt-165-d.svg",
"class": "tick-true","tick":"assets/content2/tick_true.png",
"sound":"assets/content2/Q1RightAns1.mp3",
"correct1" : true,
"hideElement":false}
],
[
{ "imgsrc":"assets/content2/opt-189-d.svg",
"class": "tick-true","tick":"assets/content2/tick_true.png",
"sound":"assets/content2/189Correct.mp3",
"correct1" : true,
"hideElement":false},
{ "imgsrc":"assets/content2/opt-179-d.svg",
"class": "tick-false",
"tick":"assets/content2/tick_false.png",
"sound":"assets/content2/189InCorrect.mp3",
"correct1" : false,
"hideElement":false},
{ "imgsrc":"assets/content2/opt-169-d.svg",
"class": "tick-false","tick":"assets/content2/tick_false.png",
"sound":"assets/content2/189InCorrect.mp3",
"correct1" : false,
"hideElement":false}
],
[
{ "imgsrc":"assets/content2/opt-185-d.svg",
"class": "tick-false","tick":"assets/content2/tick_false.png",
"sound":"assets/content2/Q1WrongAns1.mp3",
"correct1" : false,
"hideElement":false},
{ "imgsrc":"assets/content2/opt-175-d.svg",
"class": "tick-false","tick":"assets/content2/tick_false.png",
"sound":"assets/content2/Q1WrongAns1.mp3",
"correct1" : false,
"hideElement":false},
{ "imgsrc":"assets/content2/opt-165-d.svg",
"class": "tick-true","tick":"assets/content2/tick_true.png",
"sound":"assets/content2/Q1RightAns1.mp3",
"correct1" : true,
"hideElement":false}
]
],
"optionslist_duplicate":[
[
{"path" : "assets/content2/189.mp3" }
],
[
{"path" : "assets/content2/189.mp3"}
],
[
{"path" : "null"}
]
]
}
]
}
}
import { Component , OnInit} from '@angular/core';
import { ActivatedRoute,Router } from '@angular/router';
import {SharedService} from '../shared.service';
import 'jquery';
declare var $: any;
@Component({
selector: 'my-activity',
template: require('./activity.component.html'),
styles: [require('./activity.component.css')]
})
export class ActivityComponent implements OnInit{
constructor(private router: Router,
private route: ActivatedRoute,private _sharedService: SharedService) {}
optionslist=this._sharedService.navigatetoroute.data[0].optionslist;
optionslist_duplicate=this._sharedService.navigatetoroute.data[0].optionslist_duplicate;
myoption = this.optionslist[0];
myoption_duplicate = this.optionslist_duplicate[0];
currentIdx = 0;
previous(){
if( this.currentIdx > 0) {
this.currentIdx--;
this.myoption = this.optionslist[this.currentIdx];
this.myoption_duplicate = this.optionslist_duplicate[this.currentIdx];
}
}
next(){
if( this.currentIdx < (this.optionslist.length-1)) {
this.currentIdx++;
this.myoption = this.optionslist[this.currentIdx];
this.myoption_duplicate = this.optionslist_duplicate[this.currentIdx]; }
}
id: number;
styles = {};
isaudio = false;
audio =new Audio();
selected(option) {
if(option.correct1 == true){
this._sharedService.scoreData(10);
console.log('Data sent of score',this._sharedService.Activity_Score);
}
else{
this._sharedService.scoreData(0);
console.log('Data sent of score',this._sharedService.Activity_Score);
}
this.audio.src = option.sound;
this.audio.load();
this.audio.play();
this.myoption[0].hideElement = false;
this.myoption[1].hideElement = false;
this.myoption[2].hideElement = false;
option.hideElement= true;
}
clicked0(event) {
var audio = new Audio();
audio.src = this.myoption_duplicate[0].path;
if(this.myoption_duplicate[0].path =="null" && this._sharedService.navigatetoroute.type== 1){
this._sharedService.activityfinished();
}
audio.load();
audio.play();
}
ngOnInit() {
this.route.params.subscribe(params => {
this.id = +params['id']; // (+) converts string 'id' to a number
console.log(this.id)
});
}
}
