Toggle menu
875
3.8K
30.2K
279.1K
Catglobe Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Show language selector page: Difference between revisions

From Catglobe Wiki
No edit summary
Cg loc (talk | contribs)
No edit summary
 
Line 13: Line 13:
**languageselector = the selected language's ISO code
**languageselector = the selected language's ISO code
*In order to go Next after setting the language, we need to submit the form again with "next" as parameter "dir"'s value
*In order to go Next after setting the language, we need to submit the form again with "next" as parameter "dir"'s value
*Questionnaire on cg.catglobe.com site: Javascript demo 04 (172339)
===HTML Code===
===HTML Code===
<source lang="html4strict">
<source lang="html4strict">

Latest revision as of 08:22, 14 February 2012

Introduction

In order to let the respondents choose a language to view the questionnaire
As a questionnaire creator
I want to show a language selection page as below

Solution

  • Add a page question to show the flags, hide Next and Back button
  • In order to use store the selected language for future reference, we need to create a single question D_CurrentLanguage with languages as options
  • In order to change the language, we need to make a post request to server with parameters:
    • dir = changelanguage
    • languageselector = the selected language's ISO code
  • In order to go Next after setting the language, we need to submit the form again with "next" as parameter "dir"'s value
  • Questionnaire on cg.catglobe.com site: Javascript demo 04 (172339)

HTML Code

<div align="center">
      <table>
        <tr>
          <td>
            <img style="border: 0" height="50" width="50" src="../../Images/GetImage.aspx?rid=9e152350-ae1e-47c7-bf0d-0a6f07df3679" onclick="Question.onLanguageSelect(1);">
            
          </td>
          <td>
            Welcome, please choose your language (United Kingdom)
          </td>
        </tr>
        <tr>
          <td>
            <img style="border: 0" height="50" width="50" src="../../Images/GetImage.aspx?rid=06ac1811-1aa5-4b19-9186-b46153d91106" onclick="Question.onLanguageSelect(2);">
            
          </td>
          <td>
            Welcome, please choose your language (United States)
          </td>
        </tr>
        <tr>
          <td>
            <img style="border: 0" height="50" width="50" src="../../Images/GetImage.aspx?rid=a3dd8263-817b-4f11-bd87-defb13b7cf68" onclick="Question.onLanguageSelect(3);">
            
          </td>
          <td>
            Bienvenue - Choisissez votre pays (France)
          </td>
        </tr>
        <tr>
          <td>
            <img style="border: 0" height="50" width="50" src="../../Images/GetImage.aspx?rid=e9e6fa0f-af1b-401b-89a1-5d5a9535e13c" onclick="Question.onLanguageSelect(4);">
            
          </td>
          <td>
            Welcome, please choose your language (Deutschland)
          </td>
        </tr>
        <tr>
          <td>
            <img style="border: 0" height="50" width="50" src="../../Images/GetImage.aspx?rid=4057e800-0de6-43a1-b737-dbe0642cd414" onclick="Question.onLanguageSelect(5);">
            
          </td>
          <td>
            Welcome, please choose your language (Nederland)
          </td>
        </tr>
      </table>
    </div>

Javascript

quest.myOnInit = function()
{
   $('img').css("cursor","pointer");
   $('<input type="hidden">')
   .attr('id', 'languageSelector')
   .attr('name', 'languageselector')
   .appendTo($('#page_question_text'));   
   $('#page_question_text').append($("<input type='hidden'>").attr('name','QUESTION.D_CurrentLanguage'));
}

Question =
{
   
   onLanguageSelect: function(option)
   {
      $("input[name='QUESTION.D_CurrentLanguage']").val(option);
      var isoCode;
      switch(option)
      {
         case 1:
            isoCode = "en-UK";
            break;
         case 2:
            isoCode = "en-US";
            break;
         case 3:
            isoCode = "fr-FR";
            break;
         case 4:
            isoCode = "de-DE";
            break;
         case 5:
            isoCode = "nl-NL";
            break;
         default:
            break;
      }

      $('#languageSelector').val(isoCode);
   
      var myurl =  $("form").attr("action");
      var mydata = "dir=changelanguage&languageselector="+isoCode;
      $.ajax({
         type: "POST",
         url: myurl,
         data: mydata,
         success: function(msg)
         {
            document.query.dir.value = "next";
            document.query.submit();
         },
         error:function(msg)
         {
         }
      });  

   }
}

Code sample

Open the qnaire "Js demo - some js samples" (Resource Id: 159684). View the setup of the Question "LanguageSelector"