File:Put HTML code into question's HTML.png

2018-06-18T02:26:51Z

Hovietluu:

Put HTML code into question's HTML

Insert video into question

2018-06-18T02:22:51Z

Hovietluu: v1

This page will guide you how to insert a video file (as attachment) into the question.
Please follow these steps:

1. Add an attachment and get the link of video file.
[[File:Add attachment in CG.png|none|thumb|1592x1592px]]

2. Generate HTML code and put into question's HTML

<syntaxhighlight lang="html" line="1">
<video controls="" autoplay="" width="300" height="200">
<source type="video/ogg" src="%Link%" />
<source type="video/mp4" src="%Link%" />
<source type="video/webm" src="%Link%" />
Your browser does not support the<video>element.</video>
</video>
</syntaxhighlight>

3. Save and test.

File:Add attachment in CG.png

2018-06-18T02:21:42Z

Hovietluu:

Add attachment in CG

Insert video into question

2018-06-18T02:12:50Z

Hovietluu:

This page will guide you how to insert a video file (as attachment) into the question.
Please follow these steps:

1. Add an attachment and get the link of video file.

2. Generate HTML code and put into question's HTML

<syntaxhighlight lang="html" line="1">
<video controls="" autoplay="" width="300" height="200">
<source type="video/ogg" src="%Link%" />
<source type="video/mp4" src="%Link%" />
<source type="video/webm" src="%Link%" />
Your browser does not support the<video>element.</video>
</video>
</syntaxhighlight>

3. Save and test.

2017-06-05T04:17:21Z

Hovietluu:

If you want the respondents can select the language of questionnaire by a single question instead of language bar. And also, you can put the flag of those language.<br />
This solution will help you do that.<br />
Note: In this guide, we create for 4 languages.

==== 1. Preparing ====
You need to have the flag of their countries (optional), the iso-code of their languages

Examples:

English(UK) has iso-code “en-GB”

Danish has iso-code “da-DK”

etc.

==== 2. Creating single question for this ====
Let’s create a single question with options that has value, flag image and text.

The value what you need to use for JS code.

With the flag image, you must upload to image tab of questionnaire, then you get it’s link and insert to option text.
[[File:Adding-image.png|thumb|none]]This shotscreen will show you when we added information into single question:
[[File:Singlequestion.png|none|thumb]]

==== 3. Creating the JS code ====
When you finished completely the single question, you should prepare a code like below:<syntaxhighlight lang="js" line="1">
Question.bind('afterShowQuestion', function(ev, question, jqe) {
$('.cg-ui-answer-option').addClass('multilang');
$('.multilang').click(function(){
var t= $(this).find('.cg-ui-text')[0];
var lang = $(t).text().trim();
var isoCode;
var va;
switch(lang)
{
case 'United Kingdom':
isoCode = "en-GB";
va = 1;
break;
case 'Danish':
isoCode = "da-DK";
va = 2;
break;
case 'Icelandic':
isoCode = "is-IS";
va = 3;
break;
case 'Polish':
isoCode = "pl-PL";
va = 4;
break;
/*
// there are codes that you should copy them for each languages
case 'New language name':
isoCode = "New language iso code";
va = <value of new language's answer option>;
break;

*/
default:
break;
}
$('#questionnaire-viewer').controller().changeLanguage(isoCode);
question.attr('answer',va);
});
});

</syntaxhighlight>
[[File:Codejs.png|none|thumb]]
You can add more or remove the set of code lines like we mark.

==== 4. Adding more languages for questionnaire ====
We have completed this for a language, then let’s copy for other languages.

On questionnaire’s properties, you select the languages which you used for and added in single question, then click “Update language” button.
[[File:Add languages.png|none|thumb]]

==== 5. Testing ====
Testing is done by simply pressing the “Preview” button. Alternatively, you can find the test-link for the questionnaire, by right clicking on a questionnaire in the menu, holding your mouse above the “action” menu, and clicking “information”. This opens an information box, which includes the test link.

You can select language options, and see the changes of questionnaire.

==== End of document. ====
[[Category:Questionnaire]]

Selecting language page solution

2017-06-05T04:13:38Z

Hovietluu: /* 1. Preparing: */

Selecting language page solution

2017-06-05T04:12:53Z

Hovietluu:

If you want the respondents can select the language of questionnaire by a single question instead of language bar. And also, you can put the flag of those language.<br />
This solution will help you do that.<br />
Note: In this guide, we create for 4 languages.

==== 1. Preparing: ====
You need to have the flag of their countries (optional), the iso-code of their languages

Examples:

English(UK) has iso-code “en-GB”

Danish has iso-code “da-DK”

etc.

==== 2. Creating single question for this: ====
Let’s create a single question with options that has value, flag image and text.

The value what you need to use for JS code.

With the flag image, you must upload to image tab of questionnaire, then you get it’s link and insert to option text.
[[File:Adding-image.png|thumb|none]]This shotscreen will show you when we added information into single question:
[[File:Singlequestion.png|none|thumb]]

==== 3. Creating the JS code: ====
When you finished completely the single question, you should prepare a code like below:<syntaxhighlight lang="js" line="1">
Question.bind('afterShowQuestion', function(ev, question, jqe) {
$('.cg-ui-answer-option').addClass('multilang');
$('.multilang').click(function(){
var t= $(this).find('.cg-ui-text')[0];
var lang = $(t).text().trim();
var isoCode;
var va;
switch(lang)
{
case 'United Kingdom':
isoCode = "en-GB";
va = 1;
break;
case 'Danish':
isoCode = "da-DK";
va = 2;
break;
case 'Icelandic':
isoCode = "is-IS";
va = 3;
break;
case 'Polish':
isoCode = "pl-PL";
va = 4;
break;
/*
// there are codes that you should copy them for each languages
case 'New language name':
isoCode = "New language iso code";
va = <value of new language's answer option>;
break;

*/
default:
break;
}
$('#questionnaire-viewer').controller().changeLanguage(isoCode);
question.attr('answer',va);
});
});

</syntaxhighlight>
[[File:Codejs.png|none|thumb]]
You can add more or remove the set of code lines like we mark.

==== 4. Adding more languages for questionnaire: ====
We have completed this for a language, then let’s copy for other languages.

On questionnaire’s properties, you select the languages which you used for and added in single question, then click “Update language” button.
[[File:Add languages.png|none|thumb]]

==== 5. Testing ====
Testing is done by simply pressing the “Preview” button. Alternatively, you can find the test-link for the questionnaire, by right clicking on a questionnaire in the menu, holding your mouse above the “action” menu, and clicking “information”. This opens an information box, which includes the test link.

You can select language options, and see the changes of questionnaire.

==== End of document. ====

File:Add languages.png

2017-06-05T04:11:56Z

Hovietluu:

step 4

File:Codejs.png

2017-06-05T04:09:57Z

Hovietluu:

step 3

File:Singlequestion.png

2017-06-05T04:07:27Z

Hovietluu:

step 2