Adding ability to choose a language.

iambrandonn · Mar 2, 2013 · 25f4aeb · 25f4aeb
1 parent c335dc0
commit 25f4aeb
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 1 deletion.
diff --git a/index.css b/index.css
@@ -147,4 +147,9 @@
 	-o-transition: all 1.2s;
 	-moz-transition: all 1.2s;
 	transition: all 1.2s;
+}
+
+.languageSelector {
+	display: block;
+	margin: 18px auto 0 auto;
 }
diff --git a/index.html b/index.html
@@ -21,9 +21,70 @@
 				<div class="component">
 					<canvas id="cnvTimer" width="150" height="150"></canvas>
 					<div class="timeRemaining">1:00</div>
+					<select class="languageSelector">
+						<option value="af-ZA">Afrikaans</option>
+						<option value="id-ID">Bahasa Indonesia</option>
+						<option value="ms-MY">Bahasa Melayu</option>
+						<option value="ca-ES">Català</option>
+						<option value="cs-CZ">Čeština</option>
+						<option value="de-DE">Deutsch</option>
+						<option value="en-AU">English - Australia</option>
+						<option value="en-CA">English - Canada</option>
+						<option value="en-IN">English - India</option>
+						<option value="en-NZ">English - New Zealand</option>
+						<option value="en-ZA">English - South Africa</option>
+						<option value="en-GB">English - United Kingdom</option>
+						<option value="en-US">English - United States</option>
+						<option value="es-AR">Español - Argentina</option>
+						<option value="es-BO">Español - Bolivia</option>
+						<option value="es-CL">Español - Chile</option>
+						<option value="es-CO">Español - Colombia</option>
+						<option value="es-CR">Español - Costa Rica</option>
+						<option value="es-EC">Español - Ecuador</option>
+						<option value="es-SV">Español - El Salvador</option>
+						<option value="es-ES">Español - España</option>
+						<option value="es-US">Español - Estados Unidos</option>
+						<option value="es-GT">Español - Guatemala</option>
+						<option value="es-HN">Español - Honduras</option>
+						<option value="es-MX">Español - México</option>
+						<option value="es-NI">Español - Nicaragua</option>
+						<option value="es-PA">Español - Panamá</option>
+						<option value="es-PY">Español - Paraguay</option>
+						<option value="es-PE">Español - Perú</option>
+						<option value="es-PR">Español - Puerto Rico</option>
+						<option value="es-DO">Español - República Dominicana</option>
+						<option value="es-UY">Español - Uruguay</option>
+						<option value="es-VE">Español - Venezuela</option>
+						<option value="eu-ES">Euskara</option>
+						<option value="fr-FR">Français</option>
+						<option value="gl-ES">Galego</option>
+						<option value="hr_HR">Hrvatski</option>
+						<option value="zu-ZA">IsiZulu</option>
+						<option value="is-IS">Íslenska</option>
+						<option value="it-IT">Italiano - Italia</option>
+						<option value="it-CH">Italiano - Svizzera</option>
+						<option value="hu-HU">Magyar</option>
+						<option value="nl-NL">Nederlands</option>
+						<option value="nb-NO">Norsk bokmål</option>
+						<option value="pl-PL">Polski</option>
+						<option value="pt-BR">Português - Brasil</option>
+						<option value="pt-PT">Português - Portugal</option>
+						<option value="ro-RO">Română</option>
+						<option value="sk-SK">Slovenčina</option>
+						<option value="fi-FI">Suomi</option>
+						<option value="sv-SE">Svenska</option>
+						<option value="tr-TR">Türkçe</option>
+						<option value="bg-BG">български</option>
+						<option value="ru-RU">Pусский</option>
+						<option value="sr-RS">Српски</option>
+						<option value="ko-KR">한국어</option>
+						<option value="ja-JP">日本語</option>
+						<option value="la">Lingua latīna</option>
+					</select>
 					<div class="controls">
 						<button title="Please select a category" class="startButton disabled">Start</button>
 					</div>
+
 				</div>
 			</span>
 			<span class="problemArea">

diff --git a/main.js b/main.js
@@ -14,6 +14,30 @@ var beginTime;
 var errorOccurred = false;
 var selectedCategory = 'builtin-addition';
 var problemsForSelectedCategory;
+var selectedLanguage = navigator.language;
+
+function selectLanguage(newValue) {
+	var dropdown = document.getElementsByClassName('languageSelector')[0];
+    for(var i = 0; i < dropdown.options.length; i++) {
+        if(dropdown.options[i].value === newValue) {
+           dropdown.selectedIndex = i;
+           return;
+        }
+    }
+
+    if (newValue.length === 2) {
+		for(i = 0; i < dropdown.options.length; i++) {
+			if(dropdown.options[i].value.substring(0, 2) === newValue) {
+				dropdown.selectedIndex = i;
+				return;
+			}
+		}
+    }
+
+    // Default to US english if not found
+    selectedLanguage = 'en-US';
+    selectLanguage(selectedLanguage);
+}
 
 function getQuestionFromList(theList) {
 	var index = getRandomInteger(theList.length) - 1;
@@ -114,6 +138,7 @@ function startSpeechRecognition() {
 	var speech = new SpeechRecognition();
 	speech.continuous = true;
 	speech.interimResults = true;
+	speech.lang = selectedLanguage;
 	speech.onstart = function() {
 		document.getElementsByClassName('scores')[0].classList.remove('hidden');
 		document.getElementsByClassName('card')[0].classList.remove('hidden');
@@ -189,7 +214,6 @@ function startSpeechRecognition() {
 		checkAnswer(iHeard);
 	};
 
-	speech.lang = 'en-US';
 	speech.start();
 }
 
@@ -275,6 +299,7 @@ function switchToSecondInstructions() {
 detectIfSpeechSupported();
 common.renderCategories();
 paintTimer(0.99999);
+selectLanguage(selectedLanguage);
 
 setTimeout(function() {
 	document.getElementsByClassName('leftArrow')[0].style['margin-left'] ='0';
@@ -294,4 +319,9 @@ startButton.addEventListener('click', function() {
 	startSpeechRecognition();
 });
 
+var languageSelector = document.getElementsByClassName('languageSelector')[0];
+languageSelector.addEventListener('change', function() {
+	selectedLanguage = languageSelector.options[languageSelector.selectedIndex].value;
+});
+
 var doneSound = new Audio('done.mp3');