I am working on an Angular JS project, I am new to this technology. I got an assignment from my boss.
Appointment:
1. There is an html file with the text "This is a burger."
2. I have an audio (.mp3) file with the sound "This is a burger."
this is a javascript sample
What I want:
When the sound is reproduced, then the text "This is a burger" should be a bright word.
Here is what I did to achieve the above goal.
Json
{ "config":{ "shuffleQuestions": true, "showPager": false, "allowBack": true, "autoMove": true }, "questions": [{ "Id": 1, "Name": "This is a burger.1", "Image": "assets/quiz/burgur.jpg", "QuestionAudio":"assets/quiz/audio.mp3", "QuestionAudiodelay":"100", "QuestionAudioTimeline":"0.07,1.04,1.8,2.29,3.19", "Options": [{ "Id": 1, "OptionsId": 1, "Name": "This is a burger.1", "IsAnswer": true }], "QuestionType": { "Id": 1, "Name": "Multiple Choice", "IsActive": true } }]}
HTML
<div id="quiz"> <div class="row"> <div class="col-md-12"><h1 class="left">{{quiz.name}}</h1><hr /></div> </div> <div ng-show="mode=='quiz'"> <div ng-repeat="question in filteredQuestions"> <div class="row"> <h2>{{currentPage}}.</h2> <div class="col-md-12"> <div class="card col-md-6"> <div class="flex-center"> <div class="card-block"> <img id="{{question.Id}}" class="img-responsive" ng-src="{{question.Image}}" style="width: 500px;"> </div> </div> </div> <div class="row text-left options"> <div class="col-md-6" ng-repeat="option in question.Options"> <div class="option"> <p id="{{option.Id}}" ng-bind-html="allAnswerWithSpan"> </p> </div> </div> <p id="optionAnswer"> </p> <div class="col-md-6" ng-repeat="option in question.Options" > <div class="option"> <button ng-click="playAudio()" class="btn btn-default">Play</button> </div> <audio id="myAudio" style="display: block !important;"> <source src="" type="audio/mpeg"> </audio> <img id="playaudio" style="cursor:pointer;width: 25px;height: 25px; display:none;" src='images/audio_joshi.png'/> </div> </div> </div> <hr /> <div class="quizNav"> <div> <button class="btn btn-default" ng-hide="IsHidden" ng-click="NextQuiz(currentPage - 1);">Prev</button> <button id="Next" class="btn btn-primary" ng-show="IsVisible" ng-click="NextQuiz(currentPage + 1);">Next</button> <button class="btn btn-primary" ng-hide="IsHidden" ng-click="onSubmit();" >Submit</button> </div> <br /> </div> </div> <hr /> </div>
Js
'use strict'; var app = angular.module('quizApp', ['ngRoute', 'ngSanitize']) // Routing has been added to keep flexibility in mind. This will be used in future. angular.module('quizApp').config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) { var routes = [ { url: '/home', template: 'templates/quiz.html', controller: 'quizCtrl' } ]; routes.forEach(function (r, index) { $routeProvider.when(r.url, { templateUrl: r.template, controller: r.controller }); }); $routeProvider.otherwise({ redirectTo: '/home' }); //$locationProvider.html5Mode(true); }]); var quizCtrl = function ($scope, $http, helper) { $scope.quizName = 'assets/quiz.json'; $scope.arrQuestion=[]; $scope.arrOptionsId=[]; $scope.addanswer=[]; $scope.allarray =[]; // Others are work in progress. $scope.defaultConfig = { 'allowBack': true, 'allowReview': true, 'autoMove': false, // if true, it will move to next question automatically when answered. 'duration': 0, // indicates the time in which quiz needs to be completed. post that, quiz will be automatically submitted. 0 means unlimited. 'pageSize': 1, 'requiredAll': false, // indicates if you must answer all the questions before submitting. 'richText': false, 'shuffleQuestions': false, 'shuffleOptions': false, 'showClock': false, 'showPager': true, 'theme': 'block' } $scope.IsVisible = true; $scope.IsHidden = true; $scope.IsHidden = $scope.IsHidden ? true : true; $scope.NextQuiz = function (index) { if (index > 0 && index <= $scope.totalItems) { $scope.currentPage = index; $scope.mode = 'quiz'; } if(index==$scope.totalItems){ $scope.IsHidden = false; $scope.IsVisible = $scope.IsVisible ? false : true; } $scope.qIndex++; } $scope.onClick = function (question, option) { if (question.QuestionTypeId == 1) { question.Options.forEach(function (element, index, array) { if (element.Id != option.Id) { element.Selected = false; question.Answered = element.Id; } }); } if ($scope.config.autoMove == true && $scope.currentPage < $scope.totalItems) $scope.currentPage++; } $scope.onSubmit = function () { var answers = []; /* $scope.questions.forEach(function (q, index) { //console.log(answers.push({'QuizId': $scope.quiz.Id, 'QuestionId': q.Id, 'Answered': q.Answered})); answers.push({ 'QuizId': $scope.quiz.Id, 'QuestionId': q.Id, 'Answered': q.Answered }); }); */ // Post your data to the server here. answers contains the questionId and the users' answer. //$http.post('api/Quiz/Submit', answers).success(function (data, status) { // alert(data); //}); $scope.mode = 'result'; } $scope.pageCount = function () { return Math.ceil($scope.questions.length / $scope.itemsPerPage); }; //If you wish, you may create a separate factory or service to call loadQuiz. To keep things simple, i have kept it within controller. $scope.loadQuiz = function (file) { $http.get(file) .then(function (res) { // $scope.quiz = res.data.quiz; console.log($scope.quiz.name); $scope.config = helper.extend({}, $scope.defaultConfig, res.data.config); $scope.questions = $scope.config.shuffleQuestions ? helper.shuffle(res.data.questions) : res.data.questions; $scope.totalItems = $scope.questions.length; $scope.itemsPerPage = $scope.config.pageSize; $scope.currentPage = 1; $scope.currentquestion=1; $scope.mode = 'quiz'; if($scope.config.shuffleOptions) $scope.shuffleOptions(); $scope.$watch('currentPage + itemsPerPage', function () { var begin = (($scope.currentPage - 1) * $scope.itemsPerPage), end = begin + $scope.itemsPerPage; $scope.filteredQuestions = $scope.questions.slice(begin, end); }); $scope.questions.forEach(function (question,key){ $scope.arrAnswer= question.Options[0].Name; $scope.arrOptionsId= question.Options[0].Id; $scope.arraudio= question.QuestionAudio; $scope.arraudiodelay= question.QuestionAudiodelay; $scope.arraudiotimeline= question.QuestionAudioTimeline; $scope.allarray=[$scope.arrAnswer,$scope.arraudio,$scope.arraudiodelay,$scope.arraudiotimeline]; $scope.arrQuestion.push($scope.allarray); }); if($scope.currentPage==1) { // console.log($scope.arrQuestion); $scope.qIndex = 0; $scope.audioplay(); } }); } $scope.audioplay=function(){ var qIndex = $scope.qIndex; $scope.QuestionAnswer=$scope.arrQuestion[qIndex][0]; $scope.QuestionAudio=$scope.arrQuestion[qIndex][1]; $scope.QuestionAudiodelay=$scope.arrQuestion[qIndex][2]; $scope.Questionaudiotimeline=$scope.arrQuestion[qIndex][3]; //console.log($scope.QuestionAnswer); console.log($scope.QuestionAudio); //console.log($scope.QuestionAudiodelay); console.log($scope.arrOptionsId); $scope.QuestionAnswerArray = $scope.QuestionAnswer.split(' '); //alert($scope.QuestionAnswerArray.length); $scope.allAnswerWithSpan = {}; for (var i = 0; i <$scope.QuestionAnswerArray.length; i++) { $scope.addanswer[i] = '<span>' +$scope.QuestionAnswerArray[i]+ '</span>'; // console.log($scope.addanswer); } $scope.allAnswerWithSpan = $scope.addanswer.join(" "); var audio =new Audio($scope.QuestionAudio); audio.play(); audio[0].onended = function() { audioIndex += 1; playAudio(audioIndex); }; } $scope.playAudio=function(index){ /* $("p > span").removeClass("playing"); $("#myAudio")[0].src = $scope.QuestionAudio[index]; $("#myAudio")[0].play(); $("p > span:nth-child(" + (index + 1) + ")").addClass("playing"); */ } $scope.shuffleOptions = function(){ $scope.questions.forEach(function (question) { question.Options = helper.shuffle(question.Options); }); } $scope.loadQuiz($scope.quizName); } quizCtrl.$inject = ['$scope', '$http', 'helperService']; app.controller('quizCtrl', quizCtrl);