javascript - Good practice for multilingual html SCORM content -

this more "theoretical" question rather technical one.

i need create scorm e-learning content, pure html-css-javascript without server side technology , content must multilingual. 2 main requirements: multilingual, not server side languajes.

and question best way achieve this? these obvious options:

1. duplicate html files in needed languages in different folders each languaje.
2. load language files (i. ex in xml or json), parse html dom , asign content dinamically javascript.

in second case, loading files dinamically, way of doing it? dislike somethink because obstrusive script tags within html:

<div> <p><script> document.write(some_translatable_variable) </script></p> </div> 

and dislike following because require lot of ids , it's dificult maintain:

//in json file lang.es.json "some_translatable_variable" : "esto está en español";  //in loaded langs.js, using jquery: $("#some_id").html("<p>"+some_translatable_variable+"<p>");   //the html code <div id="some_id"> <!-- nothing here --> </div> 

you can use javascript-based templating engine such mustache, handlebars, or angular.

basically you'd put placeholder in html, , javascript replace placeholder text. don't need manage slew of ids.

you can insert text different language if desired, sure watch out layout issues, such rtl languages , long sentences might break layout.

here helpful articles client-side templates: http://coding.smashingmagazine.com/2012/12/05/client-side-templating/ http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more http://net.tutsplus.com/tutorials/javascript-ajax/best-practices-when-working-with-javascript-templates/