-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
71 lines (66 loc) · 2.17 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QuickLinguaJS - Español</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="quicklingua.js" type="text/javascript"></script>
<script type="text/javascript">
var card = null;
function handleRatingChange() {
var selectedRating = $('#rating-container input:checked').val();
if (!isNaN(selectedRating)) {
$('#card-container button').removeAttr('disabled');
}
}
function handleShowClick() {
$('#en').show()
.html(card.en);
$('#rating').show();
$(this).off('click').on('click',handleNextClick);
$(this).html('Next >');
$(this).attr('disabled','disabled')
}
function handleNextClick() {
if (card) {
var difficulty = $('#rating-container input:checked').val();
languageTool.replaceCard(card,difficulty);
}
card = languageTool.getCard();
$('#es').show().html(card.es);
$('#en').hide();
$('#rating').hide();
$('#rating-container input:checked').removeAttr('checked')
$(this).off('click').on('click',handleShowClick).html('Show');
}
$(function () {
$('#card-container button').on('click', handleNextClick);
$('#rating-container input').on('change', handleRatingChange);
languageTool.setDatasource(datasource);
});
</script>
</head>
<div id="card-container">
<p id="es"> </p>
<p id="en"> </p>
<div id="rating">
<p id="rating-text">How well did you remember this token?</p>
<div id="rating-container">
<input type="radio" id="rating0" name="rating" value="0">
<label for="rating0">0</label>
<input type="radio" id="rating1" name="rating" value="1">
<label for="rating1">1</label>
<input type="radio" id="rating2" name="rating" value="2">
<label for="rating2">2</label>
<input type="radio" id="rating3" name="rating" value="3">
<label for="rating3">3</label>
<input type="radio" id="rating4" name="rating" value="4">
<label for="rating4">4</label>
<input type="radio" id="rating5" name="rating" value="5">
<label for="rating5">5</label>
</div>
</div>
<button>Start</button>
</div>
</html>