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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
$(document).ready(function(){
//Program constants
var SVG_MAP = document.getElementById('mysvg');
var MAX_SCREEN_X = 1200, MAX_SCREEN_Y = 900;
var CAPITALS = [{dept:'artigas', capital:'artigas', deptName:'Artigas', capitalName:'Artigas'},
{dept:'rivera', capital:'rivera', deptName:'Rivera', capitalName:'Rivera'},
{dept:'salto', capital:'salto', deptName:'Salto', capitalName:'Salto'},
{dept:'paysandu', capital:'paysandu', deptName:'Paysandu', capitalName:'Paysandu'},
{dept:'rioNegro', capital:'frayBentos', deptName:'Rio Negro', capitalName:'Fray Bentos'},
{dept:'tacuarembo', capital:'tacuarembo', deptName:'Tacuarembo', capitalName:'Tacuarembo'},
{dept:'cerroLargo', capital:'melo', deptName:'Cerro Largo', capitalName:'Melo'},
{dept:'durazno', capital:'durazno', deptName:'Durazno', capitalName:'Durazno'},
{dept:'treintaYTres', capital:'treintaYTres', deptName:'Treinta Y Tres', capitalName:'Treinta Y Tres'},
{dept:'soriano', capital:'mercedes', deptName:'Soriano', capitalName:'Mercedes'},
{dept:'flores', capital:'trinidad', deptName:'Flores', capitalName:'Trinidad'},
{dept:'colonia', capital:'colonia', deptName:'Colonia', capitalName:'Colonia'},
{dept:'sanJose', capital:'sanJose', deptName:'San Jose', capitalName:'San Jose de Mayo'},
{dept:'montevideo', capital:'montevideo', deptName:'Montevideo', capitalName:'Montevideo'},
{dept:'lavalleja', capital:'minas', deptName:'Lavalleja', capitalName:'Minas'},
{dept:'rocha', capital:'rocha', deptName:'Rocha', capitalName:'Rocha'},
{dept:'canelones', capital:'canelones', deptName:'Canelones', capitalName:'Canelones'},
{dept:'maldonado', capital:'maldonado', deptName:'Maldonado', capitalName:'Maldonado'},
];
//Game Control
var isActive = true;
var question = [];
var answeredCorrect = false;
var questions = CAPITALS;
// You can't access any properties of the svg document
// until it has loaded
$('#mysvg').bind('load', function() {
var svgMapDoc = SVG_MAP.getSVGDocument();
//utility functions
var scaleView = function (svgElem, width, height) {
var newRatio = 1;
var xRatio = width/MAX_SCREEN_X;
var yRatio = height/MAX_SCREEN_Y;
//get the smallest ratio
newRatio = xRatio > yRatio ? yRatio : xRatio;
if (newRatio < 1) {
svgElem.currentScale = newRatio - 0.05;
return newRatio;
} else {
//do nothing
return newRatio;
}
};
var hideAnswers = function (svgRoot) {
$('.text', svgRoot).attr('display', 'none');
};
scaleView(svgMapDoc.documentElement, window.innerWidth,
window.innerHeight);
hideAnswers(svgMapDoc);
//gameplay functions
var changeQuestion = function (questions){
var index = Math.round(Math.random() * (questions.length - 1));
var question = questions[index];
//drop the city used from the list of answers
if (index === 0 ){
questions.shift();
} else {
questions.splice(index, 1)
}
return question;
};
var askQuestion = function (questions) {
question = changeQuestion(questions);
$('#question').text("Where is the capital of " +
question.deptName + "?");
};
var checkAnswer = function (mapElem) {
if(isActive){
if ( ("cap" + question.capital).toLowerCase() === mapElem.id.toLowerCase()){
$('#answer').text("Correct! " + question.capitalName +
" is the capital of " + question.deptName);
$('.text.' + question.dept, svgMapDoc).attr('display',
'');
var timerID = setTimeout(function() {
$('#answer').text('');
askQuestion(questions);
}, 3000);
} else {
$('#answer').text("Incorrect. Please try again.");
}
} else {
//do nothing
}
};
$.map($('.capital.city', svgMapDoc), function(elem){
$(elem, svgMapDoc).bind('click', function(event) {
checkAnswer(event.target);
})
});
askQuestion(questions);
});
});
|
