Difference between revisions of "Add CKEditor to an Open question"

From Catglobe Wiki
Jump to: navigation, search
(Created page with '== Change progress bar images of questionnaire layout == We have 12 images used for progress bar in questionnaire layout. To change them, we will override the function quest.pro…')
 
Line 1: Line 1:
== Change progress bar images of questionnaire layout ==
+
== Add CKEditor to an OPEN question ==
  
We have 12 images used for progress bar in questionnaire layout.
+
We sometimes need to put in formatted text into Catglobe as answer to a question. To do this, we will use CKEditor on an Open question
To change them, we will override the function quest.progress.getHTML().
 
  
@Note: The way I used below is only used in Questionnaire layout template because in "Questionnaire layout template" we can insert javascript inside HTML tab.
+
Step 1: Get textarea's name on that question and replace in the script below
  
Step 1: Upload 12 images in any folder, better if you store them in the Images tab of Questionnaire layout editor to handle easly in future.
+
Step 2: Paste this code below into Javascript tab of that question
 
 
Step 2: Get their links and replace in the javascript below (in step 3).
 
 
 
Step 3: Paste this code below (include open and close SCRIPT tag) into HTML tab of Questionnaire layout editor.
 
  
 
<source lang = javascript>
 
<source lang = javascript>
Line 16: Line 11:
 
quest.onInit = function()
 
quest.onInit = function()
 
{
 
{
//Location of script
+
  //Location of script
 
   var ServerInfo = { "rootPath": window.location.protocol + "//" + window.location.host };
 
   var ServerInfo = { "rootPath": window.location.protocol + "//" + window.location.host };
 
   var CKEditorScript = {
 
   var CKEditorScript = {
Line 24: Line 19:
 
   window.CKEDITOR_BASEPATH = ServerInfo.rootPath + '/script/ckeditor/';
 
   window.CKEDITOR_BASEPATH = ServerInfo.rootPath + '/script/ckeditor/';
 
 
//Load scripts for CKEditor and apply it CKEditor to TextArea
+
  //Load scripts for CKEditor and apply it CKEditor to TextArea
 
   $.getScript(CKEditorScript.ckeditor, function()
 
   $.getScript(CKEditorScript.ckeditor, function()
 
   {
 
   {
Line 66: Line 61:
 
return false;
 
return false;
 
}
 
}
}
+
  }
catch(e)
+
  catch(e)
 
   {
 
   {
 
       // Inform about the reason for the exception
 
       // Inform about the reason for the exception
Line 74: Line 69:
 
       return false;
 
       return false;
 
   }
 
   }
return true;
+
  return true;
 
}
 
}
 
</source>
 
</source>

Revision as of 06:58, 12 January 2011

Add CKEditor to an OPEN question

We sometimes need to put in formatted text into Catglobe as answer to a question. To do this, we will use CKEditor on an Open question

Step 1: Get textarea's name on that question and replace in the script below

Step 2: Paste this code below into Javascript tab of that question

quest.onInit = function()
{
   //Location of script
   var ServerInfo = { "rootPath": window.location.protocol + "//" + window.location.host };
   var CKEditorScript = {
   'ckeditor': ServerInfo.rootPath + '/script/ckeditor/ckeditor.js',
   'jquery': ServerInfo.rootPath + '/script/ckeditor/adapters/jquery.js'
   }
   window.CKEDITOR_BASEPATH = ServerInfo.rootPath + '/script/ckeditor/';
	
   //Load scripts for CKEditor and apply it CKEditor to TextArea
   $.getScript(CKEditorScript.ckeditor, function()
   {
      $.getScript(CKEditorScript.jquery, function()
      {
         var config = 
         {
            lang: __cguiculture,
            customConfig: '',
            contentsCss: '',
            width: '800px',
            autoUpdateElement: true
         };
         var ta = $("textarea[name=QUESTION.Open]");
         ta.ckeditor(config);
      })
   });
}

var questioncheck = function()
{
   try
   {	
	//If there are checkboxs, if they are checked then no error
		var b = false;
		$('input:checkbox').each( function() {
			if (this.checked)
			{
				b = true;
			}
		});
		if (b) return true;
	
	//If there is no checkbox checked and textarea is empty then show error
		ErrorMessages.getInstance().clearErrorMessages();
		
		var tav = $("textarea[name=QUESTION.Open]").val();
		if (tav == "")
		{
			ErrorMessages.getInstance().showErrorMessage(quest.requiredtext);
			return false;
		}
   }
   catch(e)
   {
      // Inform about the reason for the exception
      alert(e.message);
      // And return false
      return false;
   }
   return true;
}