0
AngularJsとhtmlを使用して、試験の最後にオンライン試験用紙の画像を置き換えます。試験を開始する時にanglejsを使用して1つの画像を別の画像に置き換えます。
は、私はすでに、私は私のページに画像を取得するためにCSSを使用私のコードで「online_start」= IMG IDを使用していました。
CSS：
#online_start{
background-image:url("start_exam.jpg");
background-repeat:no-repeat;
width:400px;
height:150px;
}
は、今私はAngularJsを使用して別の画像と試験の終了時にその画像を置き換えたいです。
コード：CSSで
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="layout.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module('MyApp', [])
app.controller('MyController', function($scope, $compile, $window, $interval, $timeout, $filter) {
$scope.pos = 0, $scope.correct = 0, $scope.ques = true;
$scope.questions = [
["Which of the following a is not a keyword in Java ?", "class", "interface", "extends", "C"],
["Which of the following is an interface ?", "Thread", "Date", "Calender", "A"],
["Which company released Java Version 8 ?", "Sun", "Oracle", "Adobe", "A"],
["What is the length of Java datatype int ?", "32 bit", "16 bit", "None", "C"],
["What is the default value of Java datatype boolean?", "true", "false", "0", "A"]
];
$scope.totalsecoriginal = $scope.totalsec = 60;
$scope.totalsec--;
$scope.min = parseInt($scope.totalsec/60, 10);
$scope.sec = $scope.totalsec - ($scope.min * 60);
$scope.date = new Date();
$scope.hhmmss = $filter('date')(new Date(), 'hh:mm:ss a');
$scope.currentTime = new Date();
$scope.currentTime.setSeconds($scope.currentTime.getSeconds() + 60);
function _(x) {
console.log(angular.element(document.getElementById(x)));
return angular.element(document.getElementById(x))[0];
}
$scope.interval = $interval(function() {
if ($scope.sec === 0) {
$scope.min--;
$scope.sec = 60;
}
$scope.sec--;
}, 1000);
$scope.$watch('sec', function() {
if ($scope.min === 0 && $scope.sec === 0) {
$interval.cancel($scope.interval);
window.alert('Time Up!!!');
$scope.pos = $scope.questions.length;
$scope.temp = true;
$scope.renderQuestion();
}
})
$scope.renderQuestion = function() {
if ($scope.pos >= $scope.questions.length) {
$scope.myBackgroundUrl = 'url(animatedthankyou.gif)';
$scope.ques = false;
if (!$scope.temp) { $scope.temp = false;
$interval.cancel($scope.interval);
}
$scope.showscore = Math.round($scope.correct/$scope.questions.length * 100);
$scope.minuteleft = parseInt(($scope.totalsecoriginal - $scope.totalsec)/60, 10);
$scope.pos = 0;
return false;
}
$scope.question = $scope.questions[$scope.pos][0];
$scope.chA = $scope.questions[$scope.pos][1];
$scope.chB = $scope.questions[$scope.pos][2];
$scope.chC = $scope.questions[$scope.pos][3];
}
$scope.checkAnswer = function() {
$scope.choices = angular.element(document.getElementsByName('choices'));
$scope.choice = -1;
for (var i = 0; i < $scope.choices.length; i++) {
if ($scope.choices[i].checked) {
$scope.choice = $scope.choices[i].value;
$scope.choices[i].checked = false;
}
}
if ($scope.choice == $scope.questions[$scope.pos][4]) {
$scope.correct++;
}
$scope.pos++;
$scope.renderQuestion();
}
$scope.renderQuestion();
});
</script>
</head>
<body>
<div id="Holder">
<div id="Header"></div>
<div id="NavBar">
<nav>
<ul>
<li><a href="Loginpage.htm"> Login</a></li>
<li><a href="Registrationpage.htm">Registration</a></li>
</ul>
</div>
<div id="Content">
<div id="PageHeading">
<h1><marquee direction="right" behavior="alternate">All the Best</marquee></h1>
</div>
<div id="ContentLeft">
<h2></h2>
<br>
<img id="online_start" ng-style="{background-image: myBackgroundUrl}">
<br>
<h6>Online Examination System(OES) is a Multiple Choice Questions(MCQ) based
examination system that provides an easy to use environment for both
Test Conducters and Students appearing for Examination.</h6>
</div>
<div id="ContentRight">
<section class="loginform_cf">
<div ng-app="MyApp" ng-controller="MyController" ng-init="StartTimer()">
<table>
<tr>
<td id="test_status" style="text-align:left">
<h3 ng-show='ques'>Question {{pos+1}} of {{questions.length}}</h3>
<h3 ng-hide='ques'>Test Completed </h3>
</td>
<td ng-show='ques'> Exam Starts :<span ng-bind="hhmmss"> </span> </td>
<td ng-show='ques'> Exam Ends : {{currentTime | date:'hh:mm:ss a'}} </td>
</tr>
<tr>
<td id="test" colspan="3">
<div ng-show="ques">
<h3>{{question}}</h3>
<input type='radio' name='choices' value='A'>{{chA}}
<br>
<input type='radio' name='choices' value='B'>{{chB}}
<br>
<input type='radio' name='choices' value='C'>{{chC}}
<br>
<br>
<button ng-click='checkAnswer()'>Next</button>
<br>
<br>
Your Left Time is :{{min}} Minutes {{sec}} Seconds
</div>
<div ng-hide='ques'>
<h3>You got {{correct}} correct of {{questions.length}} questions</h3>
<h3> Your Grade : {{showscore}}% </h3>
<h4>Exam Finished in Time :{{minuteleft}} Minutes {{sec}} Seconds</h4>
<button ng-click='EndExam()'>End the Exam</button>
</div>
<br>
<br>
</td>
</tr>
</table>
</div>
</section>
</div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
uが配置されています ' background-image'、そしてJSuでは 'src'を配置しています！ – Smit
代わりに 'document.getElementById（" online_start "）。style.backgroundImage =" animatedthankyou.gif ";' – Smit
あなたはJavaScriptで書かれたビジネスログイン全体です。その時間の無駄です。最初にビジネスをAngularに持っていくと、角度のあるものをするのに役立つかもしれません。 –