Forms Language Bar - Revision history

Philip Lacey at 02:38, 2 January 2016

2016-01-02T02:38:49Z

Philip Lacey: /* Initial form */

2016-01-02T02:37:05Z

‎Initial form

Philip Lacey at 10:38, 20 August 2015

2015-08-20T10:38:01Z

Philip Lacey: /* Translations */

2015-08-20T10:34:01Z

‎Translations

Philip Lacey: /* Translations */

2015-08-20T10:32:55Z

‎Translations

Philip Lacey: /* Translations */

2015-08-20T10:31:57Z

‎Translations

Philip Lacey at 10:31, 20 August 2015

2015-08-20T10:31:22Z

Philip Lacey at 09:52, 20 August 2015

2015-08-20T09:52:03Z

Philip Lacey at 09:39, 20 August 2015

2015-08-20T09:39:56Z

Philip Lacey at 09:28, 20 August 2015

2015-08-20T09:28:39Z

@@ Line 73: / Line 73: @@
-[[File:languagebar_002.png|800xpx]]
+[[File:Languagebar_002.png|800xpx]]
@@ Line 94: / Line 94: @@
-[[File:languagebar_003.png|800xpx]]
+[[File:Languagebar_003.png|800xpx]]
@@ Line 164: / Line 164: @@
 Now if you click the different buttons you get the following type screen.
-[[File:languagebar_004.png|800xpx]]
+[[File:Languagebar_004.png|800xpx]]
@@ Line 368: / Line 368: @@
-[[File:languagebar_005.png|800xpx]]
+[[File:Languagebar_005.png|800xpx]]
@@ Line 539: / Line 539: @@
-[[File:languagebar_006.png|800xpx]]
+[[File:Languagebar_006.png|800xpx]]

← Older revision		Revision as of 02:37, 2 January 2016
Line 35:		Line 35:


−	[[File:~~languagebar_001~~.png\|800xpx]]	+	[[File:Languagebar_001.png\|800xpx]]
−
−

	= Building a bar =		= Building a bar =

@@ Line 35: / Line 35: @@
-[[File:languagebar_001.png|600xpx]]
+[[File:languagebar_001.png|800xpx]]
@@ Line 75: / Line 75: @@
-[[File:languagebar_002.png|600xpx]]
+[[File:languagebar_002.png|800xpx]]
@@ Line 96: / Line 96: @@
-[[File:languagebar_003.png|600xpx]]
+[[File:languagebar_003.png|800xpx]]
@@ Line 166: / Line 166: @@
 Now if you click the different buttons you get the following type screen.
-[[File:languagebar_004.png|600xpx]]
+[[File:languagebar_004.png|800xpx]]
@@ Line 370: / Line 370: @@
-[[File:languagebar_005.png|600xpx]]
+[[File:languagebar_005.png|800xpx]]
@@ Line 538: / Line 538: @@

@@ Line 465: / Line 465: @@
 		objColourList.options.length 			= 0;
 		objColourList.options[objColourList.length] 	= new Option('''', '''');
-		objColourList.options[objColourList.length] 	= new Option('Red', 'Red');
+		objColourList.options[objColourList.length] 	= new Option('Rouge', 'Red');
-		objColourList.options[objColourList.length] 	= new Option('Green', 'Green');
+		objColourList.options[objColourList.length] 	= new Option('Vert', 'Green');
-		objColourList.options[objColourList.length] 	= new Option('Blue', 'Blue');
+		objColourList.options[objColourList.length] 	= new Option('Bleu', 'Blue');
+	}
 	else if (strLanguage == 'ES'){

@@ Line 451: / Line 451: @@
 		objColourList.options[objColourList.length] 	= new Option('Dearg', 'Red');
 		objColourList.options[objColourList.length] 	= new Option('Glas', 'Green');
-		objColourList.options[objColourList.length] 	= new Option('Blue', 'Blue');
+		objColourList.options[objColourList.length] 	= new Option('Gorm', 'Blue');
+	}
 	else if (strLanguage == 'FR'){

← Older revision	Revision as of 10:31, 20 August 2015
Line 370:	Line 370:


	+	[[File:languagebar_005.png\|600xpx]]
	+
	+
	+	== Other parts ==
	+
	+
	+	There are other functional elements on the page but all of them have Ids which can be manipulated, or else can have a div put around them to allow them to be changed.
	+
	+
	+	If you have further questions please email support@bxpsoftware.com for further details.
	+
	+
	+
	+	= Translations =
	+
	+
	+	Once you are absolutely positive that you have all the functional elements you want to control changing (as demonstrated above), then and only then should you send out to get your strings translated.
	+
	+
	+	It is important that your functional review confirm all the elements that need to change before you get your strings.
	+
	+
	+	To translate the items, you can use cool tools like Google Translate, or you can send the file out to a professional company to do the translations for you.
	+
	+
	+	So the final Opening Instructions will look like
	+
	+	<syntaxhighlight lang="javascript">
	+	<div id='strOpening'>Good --period--. My name is --firstname--. How can I help?</div><br />
	+
	+	<script type="text/javascript" language="javascript">
	+	function fn_LanguageChange(strLanguage){
	+
	+	//Page variables.
	+	var strUsername = document.getElementById('strBEDisplayed_Username').value;
	+
	+	//Other page elements
	+	var strName_Title = document.getElementById('objHeading_strCDA_782_field_0_2');
	+	var strName_Firstname = document.getElementById('objHeading_strCDA_782_field_1_2');
	+	var strName_Initial = document.getElementById('objHeading_strCDA_782_field_2_2');
	+	var strName_Surname = document.getElementById('objHeading_strCDA_782_field_3_2');
	+	var strButton_Similar = document.getElementById('btnFind_SimilarstrCDA_782_field_1_2');
	+	var objColourList = document.getElementById('strCDA_782_field_0_7');
	+
	+	//List out all the items to be changed
	+	var strOpening = document.getElementById('strOpening');
	+	var strName = document.getElementById('strName');
	+	var strNumber = document.getElementById('strNumber');
	+	var strColour = document.getElementById('strColour');
	+
	+	//Now we adapt the strings for each language
	+	if (strLanguage == 'US'){
	+	strButton_Similar.value = 'Find Similar';
	+	strName_Title.innerHTML = 'Title';
	+	strName_Firstname.innerHTML = 'Firstname';
	+	strName_Initial.innerHTML = 'Initial';
	+	strName_Surname.innerHTML = 'Surname';
	+	strOpening.innerHTML = 'Good morning. My name is Admin. How can I help?';
	+	strName.innerHTML = 'Can I ask your name please?';
	+	strNumber.innerHTML = 'Can I get a phone number please?';
	+	strColour.innerHTML = 'What is your favourite colour?';
	+	objColourList.options.length = 0;
	+	objColourList.options[objColourList.length] = new Option('''', '''');
	+	objColourList.options[objColourList.length] = new Option('Red', 'Red');
	+	objColourList.options[objColourList.length] = new Option('Green', 'Green');
	+	objColourList.options[objColourList.length] = new Option('Blue', 'Blue');
	+	}
	+	else if (strLanguage == 'IE'){
	+	strButton_Similar.value = 'Comhchosúla';
	+	strName_Title.innerHTML = 'Teideal';
	+	strName_Firstname.innerHTML = 'Céadainm';
	+	strName_Initial.innerHTML = 'Ainm lár';
	+	strName_Surname.innerHTML = 'Sloinne';
	+	strOpening.innerHTML = 'Dea-maidin. Is é mo ainm Riarachán. Conas is féidir liom cabhrú?';
	+	strName.innerHTML = 'An féidir liom a iarraidh ar do ainm le do thoil?';
	+	strNumber.innerHTML = 'An féidir liom a uimhir theileafóin a fháil le do thoil?';
	+	strColour.innerHTML = 'Cad é do dath is fearr leat?';
	+	objColourList.options.length = 0;
	+	objColourList.options[objColourList.length] = new Option('''', '''');
	+	objColourList.options[objColourList.length] = new Option('Dearg', 'Red');
	+	objColourList.options[objColourList.length] = new Option('Glas', 'Green');
	+	objColourList.options[objColourList.length] = new Option('Blue', 'Blue');
	+	}
	+	else if (strLanguage == 'FR'){
	+	strButton_Similar.value = 'Similaire';
	+	strName_Title.innerHTML = 'Titre';
	+	strName_Firstname.innerHTML = 'Prénom';
	+	strName_Initial.innerHTML = 'Initiale';
	+	strName_Surname.innerHTML = 'Nom de famille';
	+	strOpening.innerHTML = 'Bonjour. Mon nom est Admin. Comment puis-je aider?';
	+	strName.innerHTML = 'Puis-je vous demander votre nom s\'il vous plaît?';
	+	strNumber.innerHTML = 'Puis-je obtenir un numéro de téléphone s\'il vous plaît?';
	+	strColour.innerHTML = 'Quelle est ta couleur préférée?';
	+	objColourList.options.length = 0;
	+	objColourList.options[objColourList.length] = new Option('''', '''');
	+	objColourList.options[objColourList.length] = new Option('Red', 'Red');
	+	objColourList.options[objColourList.length] = new Option('Green', 'Green');
	+	objColourList.options[objColourList.length] = new Option('Blue', 'Blue');
	+	}
	+	else if (strLanguage == 'ES'){
	+	strButton_Similar.value = 'Similares';
	+	strName_Title.innerHTML = 'Título';
	+	strName_Firstname.innerHTML = 'Nombre de pila';
	+	strName_Initial.innerHTML = 'Inicial';
	+	strName_Surname.innerHTML = 'Apellido';
	+	strOpening.innerHTML = 'Buenos días. Mi nombre es admin. ¿Cómo puedo ayudar?';
	+	strName.innerHTML = '¿Puedo preguntarle su nombre, por favor?';
	+	strNumber.innerHTML = '¿Puedo obtener un número de teléfono por favor?';
	+	strColour.innerHTML = '¿Cuál es tu color favorito?';
	+	objColourList.options.length = 0;
	+	objColourList.options[objColourList.length] = new Option('''', '''');
	+	objColourList.options[objColourList.length] = new Option('Rojo', 'Red');
	+	objColourList.options[objColourList.length] = new Option('Verde', 'Green');
	+	objColourList.options[objColourList.length] = new Option('Azul', 'Blue');
	+	}
	+	else if (strLanguage == 'DE'){
	+	strButton_Similar.value = 'ähnliche';
	+	strName_Title.innerHTML = 'Titel';
	+	strName_Firstname.innerHTML = 'Vorname';
	+	strName_Initial.innerHTML = 'Initiale';
	+	strName_Surname.innerHTML = 'Nachname';
	+	strOpening.innerHTML = 'Guten Morgen. Mein Name ist Admin. Wie kann ich helfen?';
	+	strName.innerHTML = 'Kann ich Ihren Namen bitte?';
	+	strNumber.innerHTML = 'Kann ich eine Telefonnummer bitte?';
	+	strColour.innerHTML = 'Was ist Ihre Lieblingsfarbe?';
	+	objColourList.options.length = 0;
	+	objColourList.options[objColourList.length] = new Option('''', '''');
	+	objColourList.options[objColourList.length] = new Option('Rote', 'Red');
	+	objColourList.options[objColourList.length] = new Option('Grün', 'Green');
	+	objColourList.options[objColourList.length] = new Option('Blau', 'Blue');
	+	}
	+	else if (strLanguage == 'PT'){
	+	strButton_Similar.value = 'Similar';
	+	strName_Title.innerHTML = 'Título';
	+	strName_Firstname.innerHTML = 'Primeiro';
	+	strName_Initial.innerHTML = 'Inicial';
	+	strName_Surname.innerHTML = 'Sobrenome';
	+	strOpening.innerHTML = 'Bom Dia. Meu nome é administrador. Como posso ajudar?';
	+	strName.innerHTML = 'Posso perguntar seu nome, por favor?';
	+	strNumber.innerHTML = 'Posso obter um número de telefone, por favor?';
	+	strColour.innerHTML = 'Qual é a sua cor favorita?';
	+	objColourList.options.length = 0;
	+	objColourList.options[objColourList.length] = new Option('''', '''');
	+	objColourList.options[objColourList.length] = new Option('Vermelho', 'Red');
	+	objColourList.options[objColourList.length] = new Option('Verde', 'Green');
	+	objColourList.options[objColourList.length] = new Option('Azul', 'Blue');
	+	}
	+	else if (strLanguage == 'PL'){
	+	strButton_Similar.value = 'Podobne';
	+	strName_Title.innerHTML = 'Tytuł';
	+	strName_Firstname.innerHTML = 'Imię';
	+	strName_Initial.innerHTML = 'Początkowy';
	+	strName_Surname.innerHTML = 'Nazwisko';
	+	strOpening.innerHTML = 'Dzień dobry. Nazywam się Admin. Jak mogę pomóc?';
	+	strName.innerHTML = 'Mogę zadać swoje nazwisko proszę?';
	+	strNumber.innerHTML = 'Czy mogę otrzymać numer telefonu należy?';
	+	strColour.innerHTML = 'Jaki jest Twój ulubiony kolor?';
	+	objColourList.options.length = 0;
	+	objColourList.options[objColourList.length] = new Option('''', '''');
	+	objColourList.options[objColourList.length] = new Option('Czerwony', 'Red');
	+	objColourList.options[objColourList.length] = new Option('Zielony', 'Green');
	+	objColourList.options[objColourList.length] = new Option('Niebieski', 'Blue');
	+	}
	+	}
	+	</script>
	+	</syntaxhighlight>

← Older revision		Revision as of 09:52, 20 August 2015
Line 240:		Line 240:

	== Putting it together ==		== Putting it together ==
		+
		+	Now we can put all the elements in place and test that they change.
		+
		+	<syntaxhighlight lang="javascript">
		+	<script type="text/javascript" language="javascript">
		+	function fn_LanguageChange(strLanguage){
		+
		+	//Page variables.
		+	var strUsername = document.getElementById('strBEDisplayed_Username').value;
		+
		+	//Other page elements
		+	var strName_Title = document.getElementById('objHeading_strCDA_782_field_0_2');
		+	var strName_Firstname = document.getElementById('objHeading_strCDA_782_field_1_2');
		+	var strName_Initial = document.getElementById('objHeading_strCDA_782_field_2_2');
		+	var strName_Surname = document.getElementById('objHeading_strCDA_782_field_3_2');
		+	var strButton_Similar = document.getElementById('btnFind_SimilarstrCDA_782_field_1_2');
		+	var objColourList = document.getElementById('strCDA_782_field_0_7');
		+
		+	//List out all the items to be changed
		+	var strOpening = document.getElementById('strOpening');
		+	var strName = document.getElementById('strName');
		+	var strNumber = document.getElementById('strNumber');
		+	var strColour = document.getElementById('strColour');
		+
		+	//Now we adapt the strings for each language
		+	if (strLanguage == 'US'){
		+	strButton_Similar.value = 'a';
		+	strName_Title.innerHTML = 'a';
		+	strName_Firstname.innerHTML = 'a';
		+	strName_Initial.innerHTML = 'a';
		+	strName_Surname.innerHTML = 'a';
		+	strOpening.innerHTML = 'a';
		+	strName.innerHTML = 'a';
		+	strNumber.innerHTML = 'a';
		+	strColour.innerHTML = 'a';
		+	objColourList.options.length = 0;
		+	objColourList.options[objColourList.length] = new Option('''', '''');
		+	objColourList.options[objColourList.length] = new Option('a text', 'a value');
		+	}
		+	else if (strLanguage == 'IE'){
		+	strButton_Similar.value = 'b';
		+	strName_Title.innerHTML = 'b';
		+	strName_Firstname.innerHTML = 'b';
		+	strName_Initial.innerHTML = 'b';
		+	strName_Surname.innerHTML = 'b';
		+	strOpening.innerHTML = 'b';
		+	strName.innerHTML = 'b';
		+	strNumber.innerHTML = 'b';
		+	strColour.innerHTML = 'b';
		+	objColourList.options.length = 0;
		+	objColourList.options[objColourList.length] = new Option('''', '''');
		+	objColourList.options[objColourList.length] = new Option('b text', 'b value');
		+	}
		+	else if (strLanguage == 'FR'){
		+	strButton_Similar.value = 'c';
		+	strName_Title.innerHTML = 'c';
		+	strName_Firstname.innerHTML = 'c';
		+	strName_Initial.innerHTML = 'c';
		+	strName_Surname.innerHTML = 'c';
		+	strOpening.innerHTML = 'c';
		+	strName.innerHTML = 'c';
		+	strNumber.innerHTML = 'c';
		+	strColour.innerHTML = 'c';
		+	objColourList.options.length = 0;
		+	objColourList.options[objColourList.length] = new Option('''', '''');
		+	objColourList.options[objColourList.length] = new Option('c text', 'c value');
		+	}
		+	else if (strLanguage == 'ES'){
		+	strButton_Similar.value = 'd';
		+	strName_Title.innerHTML = 'd';
		+	strName_Firstname.innerHTML = 'd';
		+	strName_Initial.innerHTML = 'd';
		+	strName_Surname.innerHTML = 'd';
		+	strOpening.innerHTML = 'd';
		+	strName.innerHTML = 'd';
		+	strNumber.innerHTML = 'd';
		+	strColour.innerHTML = 'd';
		+	objColourList.options.length = 0;
		+	objColourList.options[objColourList.length] = new Option('''', '''');
		+	objColourList.options[objColourList.length] = new Option('d text', 'd value');
		+	}
		+	else if (strLanguage == 'DE'){
		+	strButton_Similar.value = 'e';
		+	strName_Title.innerHTML = 'e';
		+	strName_Firstname.innerHTML = 'e';
		+	strName_Initial.innerHTML = 'e';
		+	strName_Surname.innerHTML = 'e';
		+	strOpening.innerHTML = 'e';
		+	strName.innerHTML = 'e';
		+	strNumber.innerHTML = 'e';
		+	strColour.innerHTML = 'e';
		+	objColourList.options.length = 0;
		+	objColourList.options[objColourList.length] = new Option('''', '''');
		+	objColourList.options[objColourList.length] = new Option('e text', 'e value');
		+	}
		+	else if (strLanguage == 'PT'){
		+	strButton_Similar.value = 'f';
		+	strName_Title.innerHTML = 'f';
		+	strName_Firstname.innerHTML = 'f';
		+	strName_Initial.innerHTML = 'f';
		+	strName_Surname.innerHTML = 'f';
		+	strOpening.innerHTML = 'f';
		+	strName.innerHTML = 'f';
		+	strNumber.innerHTML = 'f';
		+	strColour.innerHTML = 'f';
		+	objColourList.options.length = 0;
		+	objColourList.options[objColourList.length] = new Option('''', '''');
		+	objColourList.options[objColourList.length] = new Option('f text', 'f value');
		+	}
		+	else if (strLanguage == 'PL'){
		+	strButton_Similar.value = 'g';
		+	strName_Title.innerHTML = 'g';
		+	strName_Firstname.innerHTML = 'g';
		+	strName_Initial.innerHTML = 'g';
		+	strName_Surname.innerHTML = 'g';
		+	strOpening.innerHTML = 'g';
		+	strName.innerHTML = 'g';
		+	strNumber.innerHTML = 'g';
		+	strColour.innerHTML = 'g';
		+	objColourList.options.length = 0;
		+	objColourList.options[objColourList.length] = new Option('''', '''');
		+	objColourList.options[objColourList.length] = new Option('g text', 'g value');
		+	}
		+	}
		+	</script>
		+	</syntaxhighlight>
		+
		+	When you test you should be able to confirm the following happens.
		+
		+

@@ Line 26: / Line 26: @@
 * Add a Simple - List Menu and give it the name "What is your favourite colour?"
 * Add three options to the drop down list "Red" "Green" and "Blue"
-* Edit the Vertical Delivery Options and after the default "How can I help?" add "<br /><div id="strOpening"></div>"
+* Edit the Vertical Delivery Options and after the default "How can I help?" add "<br /><div id='strOpening'></div>"
-* Edit the title block and add to the notes "<div id="strName"></div>"
+* Edit the title block and add to the notes "<div id='strName'></div>"
-* Edit the phone number question and add to the notes "<div id="strNumber"></div>"
+* Edit the phone number question and add to the notes "<div id='strNumber'></div>"
-* Edit the list menu quetsion and add to the notes "<div id="strColour"></div>"
+* Edit the list menu quetsion and add to the notes "<div id='strColour'></div>"
@@ Line 182: / Line 182: @@
 <syntaxhighlight lang="html4strict">
-<div id="strOpening">Good --period--.  My name is --firstname--.  How can I help?</div><br />
+<div id='strOpening'>Good --period--.  My name is --firstname--.  How can I help?</div><br />
 </syntaxhighlight>

← Older revision		Revision as of 09:28, 20 August 2015
Line 166:		Line 166:
	Now if you click the different buttons you get the following type screen.		Now if you click the different buttons you get the following type screen.

−	[[File:~~languagebar_003~~.png\|600xpx]]	+	[[File:languagebar_004.png\|600xpx]]
		+
		+
		+
		+	= Tweaking the script =
		+
		+
		+	Now that you can see how your language bar is going to work, we tweak each of the areas.
		+
		+
		+	== Opening script ==
		+
		+
		+	Move the div around the opening script instead of being after it.
		+
		+	<syntaxhighlight lang="html4strict">
		+	<div id="strOpening">Good --period--. My name is --firstname--. How can I help?</div><br />
		+	</syntaxhighlight>
		+
		+
		+	On the page is a hidden variable called strBEDisplayed_Username.
		+
		+
		+	There is also another one called dteCCL_782_StartDateTime. From the StartDateTime, we can work out the period.
		+
		+
		+
		+	== Questions ==
		+
		+
		+	=== Can I ask your name please ===
		+
		+
		+	Move the div around the Question, instead of in the Notes.
		+
		+	You'll notice the field headings are in English. Right click on one of them and choose "Inspect Element". This will give you an Id for the td.
		+
		+	E.g. our form is 782, so we get.
		+
		+	<syntaxhighlight lang="html4strict">
		+	<tr>
		+	<td width="13%" id="objHeading_strCDA_782_field_0_2">Title</td>
		+	<td width="28%" id="objHeading_strCDA_782_field_1_2">Firstname</td>
		+	<td width="13%" id="objHeading_strCDA_782_field_2_2">Initial</td>
		+	<td width="28%" id="objHeading_strCDA_782_field_3_2">Surname</td>
		+	</tr>
		+	</syntaxhighlight>
		+
		+	In our JavaScript we add language translation for each of these items as well.
		+
		+	Do exactly the same thing with the "Find Similar" button, which turns out to be btnFind_SimilarstrCDA_782_field_1_2
		+
		+
		+
		+	=== Can I get a phone number please? ===
		+
		+
		+	Simply move the div into the Question
		+
		+
		+
		+	=== What is your favourite colour? ===
		+
		+
		+	Again move the div into the Question. However as this is a drop down list we want the values to appear to the user in their native language, but the data in the background to be stored in English for consistency.
		+
		+
		+	Find the ID of the question, which in this case is strCDA_782_field_0_7. You do this by editing the question and at the top of the screen it will let you know what the element Id is.
		+
		+
		+	For each item, we wipe the drop down list and put back in the options in the appropriate language. You can see below how this is done.
		+
		+
		+	== Putting it together ==
		+
		+