"Angular 2 example"
Bootstrap 3.0.0 Snippet by daman

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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},
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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]; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit PRO

Questions / Comments:

amera525 () - 3 years ago - Reply 0