"Angular 2 example"
Bootstrap 3.0.0 Snippet by daman

<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) }); } }

Related: See More


Questions / Comments:

amera525 () - 2 years ago - Reply 0