nfreear/slickquiz.js.html

## slickquiz.js.html
<!doctype html><meta charset=utf-8 /><title>*slickQuiz.JS internationalized/ translated</title>

<link rel=stylesheet href="http://juxtalearn.net/slickquiz-js/css/master.css" />
<link rel=stylesheet href="http://juxtalearn.net/slickquiz-js/css/slickQuiz.css" />
<style>
body { background: #fdfdfd; }
#slickQuiz { border: 1px solid #ddd; padding: 0 9px 9px; }

#slickQuiz .quizName span {
  position: absolute;
  top: -999px;
}
</style>


<h1>slickQuiz.JS internationalized/ translated</h1>


<form id="slickQuiz">
    <h2 class="quizName"></h2>
    <div class="quizArea">
        <div class="quizHeader">
            <a class="startQuiz" href="">Commencer!</a>
        </div>
    </div>
    <div class="quizResults">
        <h3 class="quizScore">Vous avez marqué: <span></span></h3>
        <h3 class="quizLevel"><strong>Ranking:</strong> <span></span></h3>
        <div class="quizResultsCopy"></div>
    </div>
</form>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://juxtalearn.net/slickquiz-js/js/slickQuiz.js"></script>
<script src="http://juxtalearn.net/slickquiz-js/js/slickQuiz-config.js" charset=utf-8 data-lang=en ></script>


<script data-charset=utf-8 >
// Translated texts - these can be in a separate JS(JSON-P) file... (without this object, the "_t()" function works!)
// Schoolboy French?!
var SQ_i18n = {
    'lang': 'fr-FR',
    'dir':  'ltr',

    'Check My Answer!': 'Vérifiez Ma réponse!',
    'Next &raquo;':     'Suivant',

    // NEW:
    'Question %current of %total':  'Question %current de %total',
    'You must select at least one answer.': 'Vous devez sélectionner au moins une réponse.',
    '%count. %text':   '%count、%text',  // Chinese - "enumeration comma".
    '%score / %total': '%score | %total',
    '<span>Quiz: </span>%name':  '%name<span> - Quiz - </span>',

    // quizJSON
    'Test Your Knowledge!!': 'Testez vos connaissances!'
};
</script>


<script>
$(function () {

    var $quiz = $('#slickQuiz');

    $quiz.slickQuiz({
        json: quizJSON,

        // Existing text options:
        checkAnswerText:  _t('Check My Answer!'),
        nextQuestionText: _t('Next &raquo;'),
        backButtonText:   _t(''),
        tryAgainText:     _t(''),

        // NEW:
        questionCountText:     _t('Question %current of %total'), // Line 214.
        preventUnansweredText: _t('You must select at least one answer.'), // L418.
        //questionTemplateText:  _t('%count. %text'),              // L221.
        scoreTemplateText:     _t('%score / %total'),             // L547.
        nameTemplateText:      _t('<span>Quiz: </span>%name'),

        deprecatedText:        _t('Deprecated: %message'),           // L129 - maybe a bit fussy?

        preventUnanswered:  true,
        //displayQuestionNumber: true //false
        questionTemplateText:  '%text'
    });


    // A basic translation function.
    function _t(s) {
        return window.SQ_i18n && SQ_i18n[s] || s;
    }


    $('.quizName').text(_t('Test Your Knowledge!!'));


    // Accessibility.
    var $qname = $('.quizName', $quiz);
    $qname.attr('id', $quiz.attr('id') + '-name');
    $qname.html(_t('<span>Quiz: </span>%name').replace('%name', $qname.text()));
    $quiz.attr({
      'aria-labelledby': $quiz.attr('id') + '-name',
      //'aria-label': 'Quiz',
      'aria-live': 'polite',
      'aria-relevant': 'additions ', //?
      'role': 'form'
    });
    $('a.startQuiz, [href = "#"]', $quiz).attr('role', 'button');

});
</script>


<pre>


NDF, 4 April 2014.

* https://gist.github.com/nfreear/9979561
* https://github.com/nfreear/SlickQuiz-1
* https://github.com/jewlofthelotus/SlickQuiz-WordPress
* http://stackoverflow.com/questions/1553549/how-to-internationalize-string-used-in-javascript-code
* http://ottopress.com/2012/internationalization-youre-probably-doing-it-wrong/
* http://translate.google.com/#auto/fr/Next
* http://juicystudio.com/article/wai-aria_live-regions_updated.php

</pre>
	<!doctype html><meta charset=utf-8 /><title>*slickQuiz.JS internationalized/ translated</title>

	<link rel=stylesheet href="http://juxtalearn.net/slickquiz-js/css/master.css" />
	<link rel=stylesheet href="http://juxtalearn.net/slickquiz-js/css/slickQuiz.css" />
	<style>
	body { background: #fdfdfd; }
	#slickQuiz { border: 1px solid #ddd; padding: 0 9px 9px; }

	#slickQuiz .quizName span {
	position: absolute;
	top: -999px;
	}
	</style>


	<h1>slickQuiz.JS internationalized/ translated</h1>


	<form id="slickQuiz">
	<h2 class="quizName"></h2>
	<div class="quizArea">
	<div class="quizHeader">
	<a class="startQuiz" href="">Commencer!</a>
	</div>
	</div>
	<div class="quizResults">
	<h3 class="quizScore">Vous avez marqué: <span></span></h3>
	<h3 class="quizLevel"><strong>Ranking:</strong> <span></span></h3>
	<div class="quizResultsCopy"></div>
	</div>
	</form>



	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="http://juxtalearn.net/slickquiz-js/js/slickQuiz.js"></script>
	<script src="http://juxtalearn.net/slickquiz-js/js/slickQuiz-config.js" charset=utf-8 data-lang=en ></script>


	<script data-charset=utf-8 >
	// Translated texts - these can be in a separate JS(JSON-P) file... (without this object, the "_t()" function works!)
	// Schoolboy French?!
	var SQ_i18n = {
	'lang': 'fr-FR',
	'dir': 'ltr',

	'Check My Answer!': 'Vérifiez Ma réponse!',
	'Next »': 'Suivant',

	// NEW:
	'Question %current of %total': 'Question %current de %total',
	'You must select at least one answer.': 'Vous devez sélectionner au moins une réponse.',
	'%count. %text': '%count、%text', // Chinese - "enumeration comma".
	'%score / %total': '%score \| %total',
	'<span>Quiz: </span>%name': '%name<span> - Quiz - </span>',

	// quizJSON
	'Test Your Knowledge!!': 'Testez vos connaissances!'
	};
	</script>


	<script>
	$(function () {

	var $quiz = $('#slickQuiz');

	$quiz.slickQuiz({
	json: quizJSON,

	// Existing text options:
	checkAnswerText: _t('Check My Answer!'),
	nextQuestionText: _t('Next »'),
	backButtonText: _t(''),
	tryAgainText: _t(''),

	// NEW:
	questionCountText: _t('Question %current of %total'), // Line 214.
	preventUnansweredText: _t('You must select at least one answer.'), // L418.
	//questionTemplateText: _t('%count. %text'), // L221.
	scoreTemplateText: _t('%score / %total'), // L547.
	nameTemplateText: _t('<span>Quiz: </span>%name'),

	deprecatedText: _t('Deprecated: %message'), // L129 - maybe a bit fussy?

	preventUnanswered: true,
	//displayQuestionNumber: true //false
	questionTemplateText: '%text'
	});


	// A basic translation function.
	function _t(s) {
	return window.SQ_i18n && SQ_i18n[s] \|\| s;
	}


	$('.quizName').text(_t('Test Your Knowledge!!'));



	// Accessibility.
	var $qname = $('.quizName', $quiz);
	$qname.attr('id', $quiz.attr('id') + '-name');
	$qname.html(_t('<span>Quiz: </span>%name').replace('%name', $qname.text()));
	$quiz.attr({
	'aria-labelledby': $quiz.attr('id') + '-name',
	//'aria-label': 'Quiz',
	'aria-live': 'polite',
	'aria-relevant': 'additions ', //?
	'role': 'form'
	});
	$('a.startQuiz, [href = "#"]', $quiz).attr('role', 'button');

	});
	</script>



	<pre>


	NDF, 4 April 2014.

	* https://gist.github.com/nfreear/9979561
	* https://github.com/nfreear/SlickQuiz-1
	* https://github.com/jewlofthelotus/SlickQuiz-WordPress
	* http://stackoverflow.com/questions/1553549/how-to-internationalize-string-used-in-javascript-code
	* http://ottopress.com/2012/internationalization-youre-probably-doing-it-wrong/
	* http://translate.google.com/#auto/fr/Next
	* http://juicystudio.com/article/wai-aria_live-regions_updated.php

	</pre>