/
index.html
81 lines (64 loc) · 3.05 KB
/
index.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Twinoo</title>
<style type="text/css">
#expression { font-size:54px; text-align:center }
.numbers { cursor:pointer; font-size:84px; display:block; position:absolute }
#first-number { left:40% }
#second-number { left:50% }
#third-number { left:60% }
.progress-bar { width:100%; height:20px; border:solid 1px #000; position:relative }
.progress-bar .bar { width:100%; height:20px; position:absolute; right:0; background-color:red }
</style>
</head>
<body>
<div id="progress-bar" class="progress-bar"><div class="bar"></div></div>
<p id="expression"></p>
<div>
<span id="first-number" class="numbers"></span>
<span id="second-number" class="numbers"></span>
<span id="third-number" class="numbers"></span>
</div>
<script type="text/javascript" src="../libs/jquery-1.7.2/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../libs/zachstronaut-jquery-css-transform-e79642c/jquery-css-transform.js"></script>
<script type="text/javascript" src="jquery.progressbar.js"></script>
<script type="text/javascript" src="twinoo.js"></script>
<script type="text/javascript">
var operators = ['+', '+', '+', '-', '-', '-', '/', '/', '*', '*'];
var numberOfErros = 0;
var expression;
function applyNewExpression() {
var operator = getRandomOperator(operators);
var firstNumber = getFirstNumber(operator);
var secondNumber = getSecondNumber(firstNumber, operator);
expression = buildExpression(firstNumber, operator, secondNumber);
document.getElementById('expression').innerHTML = firstNumber.toString() + ' ' + operator.toString() + ' ' + secondNumber.toString();
var fields = [document.getElementById('first-number'), document.getElementById('second-number'), document.getElementById('third-number')]
var index = (getRandomNumber({ limit: 3, prevRandomNumberContext: "indexFieldsPrevRandomNumberContext" }) - 1);
for (var i = 0; i <= 2; i++) {
if (index != i)
fields[i].innerHTML = getRandomNumber({
except: expression.correctAnswer,
prevRandomNumberContext: "fieldsPrevRandomNumberContext"
});
}
fields[index].innerHTML = expression.correctAnswer;
}
window.onload = applyNewExpression;
$('.numbers').click(function () {
var clickedNumber = $(this).html();
if (clickedNumber != expression.correctAnswer)
numberOfErros++;
if (numberOfErros >= 3)
alert('acabou o jogo.');
if (0 == numberOfErros) {
var progressBar = $('#progress-bar').progressBar({ timeBar: 10, done: function () { alert('teste') } });
progressBar.progressBar('start');
}
applyNewExpression();
});
</script>
</body>
</html>