Multiple language kiosk presentation

1

Hello, I have made a kiosk presentation in Hype that I must now have display in two languages. The user would choose the language at the beginning and can also change mid-way as needed. There are many scenes and they would all need to change text in their buttons, text boxes and also choose a few different images to display.

I am trying to determine the best way to approach this in Hype and could use any assistance in finding the right direction.

Steve

1 Like
2

I felt that there’s been a bit of discussion in the past on this, but for whatever reason forum search isn’t having the best time returning results. I hope some who have directly implemented localization for Hype projects can chime in.

I’ve seen several approaches; which one is favored tends to be based on the project itself. All tend to require a little bit of JavaScript to deal with language selection. These approaches include:

  • Entirely different scenes for each language
  • Making elements for all languages (typically within a group) and showing/hiding. I think class names are usually used to denote the language of each element.
  • Using a single element, but a JSON data file that has the language mappings and code just replaces inner html or background images. (In theory you could probably use Hype v4’s Additional HTML Attributes to store language data to in lieu of a separate file)
3

Maybe this thread will be of help: Multiple language possible on textboxes…

4

Hello, tomorrow I will teach you the tricks without coding and very effective for just one scene but not for everyone. Good night

5

Yep, loads of ideas in the above thread..

One thing mentioned in this is to use the new'ish Hype's data attributes sets and the hypeDocument.customData API.

Give your text elements a class.
Add each laganguage text as a data set for each element.

30
301828×922 72.9 KB

Give you buttons a dataset indicating the language and an action to run some js to select the language data set to use for all text.

40
40890×862 57.3 KB

53
53918×458 45.2 KB

	hypeDocument.customData.dataLang = element.dataset.lang
	
	hypeDocument.functions().initAndSetLang(hypeDocument, element, event)

Also run on preper for sceneload. The code function 'initAndSetLang'
06

which iterates over the text elements.

if (typeof hypeDocument.customData.dataLang == 'undefined'){
	hypeDocument.customData.dataLang = 'es'
	 //-- only runs once
	}
	
	
	 //-- runs on selection and prep for scene load
	 
	var langTextArray = document.querySelectorAll('.langText')
	 
	var thelang =   hypeDocument.customData.dataLang  
 	 
	var i;
for (i = 0; i < langTextArray.length; i++) { 
 console.log(langTextArray[i].dataset[thelang])
  langTextArray[i].innerText =  langTextArray[i].dataset[thelang];
}

very basic example below.

lang.hype.zip (35.6 KB)

3 Likes
6

Thank you so much for this. It appears to address everything in a perfect way. I will work on implementing today.

7

Also have a look at Hype DataFill it allows you to map dataset keys to classes and update them without much efforts.

1 Like
8

@SteveBell - You’ve gotten many excellent suggestions here on how to implement a mulit-language project like this. As an example of another multi-language project done in Hype, here’s one we developed in 2015 that’s still being used by the client. You can follow the announcement and discussions here: Large-scale eLearning Site Built in Hype. The live multi-language version is here: http://mysmartmoneydecisions.com/index.html.

Let us know how your project turns out!