Как видите, я хочу написать что-то, что может извлекать объекты из массива и динамически помещать их в документ с помощью angularJs. Я также отметил позиции, где я получаю сообщение об ошибке, означает, что он ничего не показывает. но если вы запустите мой предыдущий фрагмент кода, то он работает нормально.
Моя проблема в том, что я не могу использовать значение переменной x из этих вложенных функций в jquery.
var myApp = angular.module("myApp", []);
myApp.controller("main", function($scope) {
$scope.que = {
no: 1,
qus: "What is the sum of the following expression ? 5+3",
options: [1, 8, 3, 5],
ans: 8
};
});
function sub() {
var sec = 59;
var min = 5;
var c = setInterval(function() {
sec -= 1;
document.getElementById('sec').innerHTML = sec;
document.getElementById('min').innerHTML = min;
if (sec == 0) {
sec = 59;
min -= 1;
}
if (document.getElementById('min').innerHTML == 3) {
document.getElementById('min').style.backgroundColor = "red";
document.getElementById('sec').style.backgroundColor = "red";
}
if (min == 0 && sec == 1) {
clearInterval(c);
}
}, 100);
}
body {
margin: 10px 0px 0px 0px;
}
.timer {
width: 80px;
height: 80px;
border-radius: 20px;
font-size: 34px;
font-weight: bold;
color: dimgray;
background-color: chartreuse;
}
.rCol {
border-left: 2px solid silver;
background-color: white;
height: 650px;
padding-top: 10px;
text-align: center;
}
.side {
padding: 5px 10px;
}
.btn {
margin: 5px auto;
height: 50px;
text-align: center;
}
<!doctype html>
<head>
<title>Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.js"></script>
</head>
<body onload="sub()" class='container-fluid' ng-app='myApp'>
<div class='row'>
<div class='col-sm-8' ng-controller='main'>
<div>
<h1><b>{{que.no+". "+que.qus}}</b></h1>
</div>
<div>
<form>
<ol>
<h4><b><li ng-repeat='option in que.options'><input type='radio' name='ans' value='{{option}}'/> {{option}}</li></b></h4>
</ol>
</form>
</div>
</div>
<div class='col-sm-4 rCol'>
<button class='timer' id='min'>30</button>
<button class='timer' id='sec'>00</button>
<div class="row">
<div class='col-sm-2'></div>
<div class='col-sm-8 btn btn-primary'><b>Indidcates not seen yet</b></div>
<div class='col-sm-2'></div>
</div>
<div class="row">
<div class='col-sm-2'></div>
<div class='col-sm-8 btn btn-warning'><b>Indidcates seen but not answered</b></div>
<div class='col-sm-2'></div>
</div>
<div class="row">
<div class='col-sm-2'></div>
<div class='col-sm-8 btn btn-success'><b>Indidcates answered</b></div>
<div class='col-sm-2'></div>
</div>
<div class='row side'>
<div class='col-sm-3 btn btn-danger'>1</div>
<div class='col-sm-3 btn btn-danger'>2</div>
<div class='col-sm-3 btn btn-danger'>3</div>
<div class='col-sm-3 btn btn-danger'>4</div>
<div class='col-sm-3 btn btn-danger'>5</div>
<div class='col-sm-3 btn btn-danger'>6</div>
<div class='col-sm-3 btn btn-danger'>7</div>
<div class='col-sm-3 btn btn-danger'>8</div>
<div class='col-sm-3 btn btn-danger'>9</div>
<div class='col-sm-3 btn btn-danger'>10</div>
<div class='col-sm-3 btn btn-danger'>11</div>
<div class='col-sm-3 btn btn-danger'>12</div>
<div class='col-sm-3 btn btn-danger'>13</div>
<div class='col-sm-3 btn btn-danger'>14</div>
<div class='col-sm-3 btn btn-danger'>15</div>
<div class='col-sm-3 btn btn-danger'>16</div>
<div class='col-sm-3 btn btn-danger'>17</div>
<div class='col-sm-3 btn btn-danger'>18</div>
<div class='col-sm-3 btn btn-danger'>19</div>
<div class='col-sm-3 btn btn-danger'>20</div>
</div>
<div class='col-sm-12 btn btn-success'><b>SUBMIT</b></div>
</div>
</div>
</body>
Я пытаюсь добиться того, чтобы при нажатии кнопки в правом столбце элемент div в левом столбце обновлялся в зависимости от того, чьи данные хранятся в объекте JSON и хранятся в массиве, который извлекается из базы данных.
Это будет использоваться для системы онлайн-экзаменов, которая должна быть одностраничной.