Add CKEditor to an Open question - Revision history

Cg loc: /* Challenge */

2012-02-03T09:27:54Z

Challenge

← Older revision		Revision as of 09:27, 3 February 2012
Line 2:		Line 2:

	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		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
			[[Image:CKEditor.png]]

	== Solution ==		== Solution ==
	*Create a Open question		*Create a Open question

Cg loc: /* == Solution == */

2012-02-03T09:24:31Z

== Solution ==

← Older revision		Revision as of 09:24, 3 February 2012
Line 2:		Line 2:

	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		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
	== == Solution == ==		== Solution ==
	*Create a Open question		*Create a Open question
	*Get textarea's name on that question and replace in the script below		*Get textarea's name on that question and replace in the script below

	*Paste this code below into Javascript tab of that question		*Paste this code below into Javascript tab of that question

	== Code ==		== Code ==
	<source lang = javascript>		<source lang = javascript>

Cg loc: /* Add CKEditor to an OPEN question */

2012-02-03T09:23:50Z

Add CKEditor to an OPEN question

← Older revision		Revision as of 09:23, 3 February 2012
Line 1:		Line 1:
	== ~~Add CKEditor to an OPEN question~~ ==		== Challenge ==

	~~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		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
			== == Solution == ==
	~~Step 1:~~ Get textarea's name on that question and replace in the script below		*Create a Open question
			*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~~

			*Paste this code below into Javascript tab of that question
			== Code ==
	<source lang = javascript>		<source lang = javascript>

Line 72:		Line 73:
	}		}
	</source>		</source>
			== Source ==
			Questionnaire Resource Id on cg.catglobe.com site: 164079 (Question: Q5_Add_CKEditor_to_an_Open_question)

Cg loc at 04:58, 12 January 2011

2011-01-12T04:58:23Z

← Older revision		Revision as of 04:58, 12 January 2011
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>

Cg loc: 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…'

2011-01-12T04:53:25Z

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…'

New page

== 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.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: 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: 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>

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;
}
</source>