Fold in/out texts in question text - Revision history

Cg van at 11:20, 11 January 2012

2012-01-11T11:20:48Z

← Older revision		Revision as of 11:20, 11 January 2012
Line 18:		Line 18:
	*Although we could put all the HTML inside question text using HTML editor, there might be some cases the HTML is unexpectedly changed by the editor. Therefore, a safer solution is to use QSL.		*Although we could put all the HTML inside question text using HTML editor, there might be some cases the HTML is unexpectedly changed by the editor. Therefore, a safer solution is to use QSL.

	[[Image:FoldIn OutTextsInQuestionText.png]]		[[Image:FoldIn OutTextsInQuestionText.png]]

	~~<br>~~

	=== Code ===		=== Code ===

Cg van at 11:18, 11 January 2012

2012-01-11T11:18:51Z

← Older revision		Revision as of 11:18, 11 January 2012
Line 15:		Line 15:
	=== Solution ===		=== Solution ===

	Text sections are stored in several div elements which are shown/hidden by clicking a link.~~<br>~~ Although we could put all the HTML inside question text using HTML editor, there might be some cases the HTML is unexpectedly changed by the editor. Therefore, a safer solution is to use QSL.		*Text sections are stored in several div elements which are shown/hidden by clicking a link.
			*Although we could put all the HTML inside question text using HTML editor, there might be some cases the HTML is unexpectedly changed by the editor. Therefore, a safer solution is to use QSL.

	[[Image:~~QSL - import~~.png]]		[[Image:FoldIn OutTextsInQuestionText.png]]

			<br>

	=== Code ===		=== Code ===

Cg van at 10:58, 11 January 2012

2012-01-11T10:58:15Z

← Older revision		Revision as of 10:58, 11 January 2012
Line 25:		Line 25:
	QUESTION Q1 SINGLE		QUESTION Q1 SINGLE
	[		[
	QUESTION_STYLE_SHEET="		QUESTION_STYLE_SHEET="
	.question_outer		.question_outer
	{		{
	width:800px		width:800px
	}		}
	"		"
	]		]
	<table>		<table>
	<tr>		<tr>
	<td>		<td>
	<h3>		<h3>
	<a href="#" onclick="$('#text_to_hide_1').toggle();">Show/hide text</a>		<a href="#" onclick="$('#text_to_hide_1').toggle();">Show/hide text</a>
	</h3>		</h3>
	</td>		</td>
	</tr>		</tr>
	<tr>		<tr>
	<td>		<td>
	<div id="text_to_hide_1">		<div id="text_to_hide_1">
	Your first text part		Your first text part
	</div>		</div>
	</td>		</td>
	</tr>		</tr>
	<tr>		<tr>
	<td>		<td>
	<h3>		<h3>
	<a href="#" onclick="$('#text_to_hide_2').toggle();">Show/hide text</a>		<a href="#" onclick="$('#text_to_hide_2').toggle();">Show/hide text</a>
	</h3>		</h3>
	</td>		</td>
	</tr>		</tr>
	<tr>		<tr>
	<td>		<td>
	<div id="text_to_hide_2">		<div id="text_to_hide_2">
	Your second text part		Your second text part
	</div>		</div>
	</td>		</td>
	</tr>		</tr>
	</table>		</table>
	1:Answer option 1		1:Answer option 1
Line 68:		Line 68:

	</source>		</source>

			=== Source ===
			Questionnaire Resource Id on cg site: 159730

Cg van at 10:46, 11 January 2012

2012-01-11T10:46:41Z

← Older revision		Revision as of 10:46, 11 January 2012
Line 1:		Line 1:
	==~~Challenge==~~		== Fold in/out texts in question text ==
	~~In order to save space displaying a question<br/>~~
	~~As a questionnaire creator<br~~/>
	~~I want to separate the~~ question text ~~to different sections which can be shown and hidden.<br/>~~
	~~<b>Example</b><br/><br/>~~
	~~[[Image:Fold_in-out_texts.png]]<br/><br/>~~
	~~[[Image:Fold_in-out_texts_-_2.png]]~~

	==Solution==		In order to save space displaying a question<br>
	Text sections are stored in several div elements which are shown/hidden by clicking a link.<br/>
	Although we could put all the HTML inside question text using HTML editor, there might be some cases the HTML is unexpectedly changed by the editor. Therefore, a safer solution is to use QSL.~~<br/><br/>~~		As a questionnaire creator
	[[Image:~~QSL_~~-~~_import~~.png]]
			I want to separate the question text to different sections which can be shown and hidden.

			'''Example'''

			[[Image:Fold in-out texts.png]]

			[[Image:Fold in-out texts - 2.png]]

			=== Solution ===

			Text sections are stored in several div elements which are shown/hidden by clicking a link.<br> Although we could put all the HTML inside question text using HTML editor, there might be some cases the HTML is unexpectedly changed by the editor. Therefore, a safer solution is to use QSL.

			[[Image:QSL - import.png]]

			=== Code ===

	~~==Code==~~
	<source lang="html4strict">		<source lang="html4strict">
	QUESTIONNAIRE[HTML=true]		QUESTIONNAIRE[HTML=true]
Line 24:		Line 32:
	"		"
	]		]
	<h3>		<table>
	<a href="#" onclick="$('#text_to_hide_1').toggle();">Show/hide text</a>		<tr>
	</h3>		<td>
	<div id="text_to_hide_1">		<h3>
	Your first text part		<a href="#" onclick="$('#text_to_hide_1').toggle();">Show/hide text</a>
	</div>		</h3>
	<h3>		</td>
	<a href="#" onclick="$('#text_to_hide_2').toggle();">Show/hide text</a>		</tr>
	</h3>		<tr>
	<div id="text_to_hide_2">		<td>
	Your second text part		<div id="text_to_hide_1">
	</div>		Your first text part
			</div>
			</td>
			</tr>
			<tr>
			<td>
			<h3>
			<a href="#" onclick="$('#text_to_hide_2').toggle();">Show/hide text</a>
			</h3>
			</td>
			</tr>
			<tr>
			<td>
			<div id="text_to_hide_2">
			Your second text part
			</div>
			</td>
			</tr>
			</table>
	1:Answer option 1		1:Answer option 1
	2:Answer option 2		2:Answer option 2

Catglobe: /* Code */

2009-04-22T07:12:30Z

Code

← Older revision		Revision as of 07:12, 22 April 2009
Line 17:		Line 17:
	QUESTION Q1 SINGLE		QUESTION Q1 SINGLE
	[		[
	~~QUESTION_STYLESHEET~~="		QUESTION_STYLE_SHEET="
	.question_outer		.question_outer
	{		{

Catglobe: /* Challenge */

2009-04-22T07:11:47Z

Challenge

← Older revision		Revision as of 07:11, 22 April 2009
Line 3:		Line 3:
	As a questionnaire creator<br/>		As a questionnaire creator<br/>
	I want to separate the question text to different sections which can be shown and hidden.<br/>		I want to separate the question text to different sections which can be shown and hidden.<br/>
	<b>Example</b><br/>		<b>Example</b><br/><br/>
	[[Image:Fold_in-out_texts.png]]<br/>		[[Image:Fold_in-out_texts.png]]<br/><br/>
	[[Image:Fold_in-out_texts_-_2.png]]		[[Image:Fold_in-out_texts_-_2.png]]

	==Solution==		==Solution==
	Text sections are stored in several div elements which are shown/hidden by clicking a link.<br/>		Text sections are stored in several div elements which are shown/hidden by clicking a link.<br/>

Catglobe: /* Solution */

2009-04-22T07:11:31Z

Solution

← Older revision		Revision as of 07:11, 22 April 2009
Line 8:		Line 8:
	==Solution==		==Solution==
	Text sections are stored in several div elements which are shown/hidden by clicking a link.<br/>		Text sections are stored in several div elements which are shown/hidden by clicking a link.<br/>
	Although we could put all the HTML inside question text using HTML editor, there might be some cases the HTML is unexpectedly changed by the editor. Therefore, a safer solution is to use QSL.		Although we could put all the HTML inside question text using HTML editor, there might be some cases the HTML is unexpectedly changed by the editor. Therefore, a safer solution is to use QSL.<br/><br/>
			[[Image:QSL_-_import.png]]

	==Code==		==Code==
	<source lang="html4strict">		<source lang="html4strict">

Catglobe: /* Code */

2009-04-22T07:09:25Z

Code

← Older revision		Revision as of 07:09, 22 April 2009
Line 10:		Line 10:
	Although we could put all the HTML inside question text using HTML editor, there might be some cases the HTML is unexpectedly changed by the editor. Therefore, a safer solution is to use QSL.		Although we could put all the HTML inside question text using HTML editor, there might be some cases the HTML is unexpectedly changed by the editor. Therefore, a safer solution is to use QSL.
	==Code==		==Code==
	<source lang="~~html~~">		<source lang="html4strict">
	QUESTIONNAIRE[HTML=true]		QUESTIONNAIRE[HTML=true]
	QUESTION Q1 SINGLE		QUESTION Q1 SINGLE

Catglobe: New page: ==Challenge== In order to save space displaying a question
As a questionnaire creator
I want to separate the question text to different sections which can be shown and hidden.
2009-04-22T07:08:45Z

New page: ==Challenge== In order to save space displaying a question<br/> As a questionnaire creator<br/> I want to separate the question text to different sections which can be shown and hidden.<br...

New page
==Challenge==
In order to save space displaying a question<br/>
As a questionnaire creator<br/>
I want to separate the question text to different sections which can be shown and hidden.<br/>
<b>Example</b><br/>
[[Image:Fold_in-out_texts.png]]<br/>
[[Image:Fold_in-out_texts_-_2.png]]
==Solution==
Text sections are stored in several div elements which are shown/hidden by clicking a link.<br/>
Although we could put all the HTML inside question text using HTML editor, there might be some cases the HTML is unexpectedly changed by the editor. Therefore, a safer solution is to use QSL.
==Code==
<source lang="html">
QUESTIONNAIRE[HTML=true]
QUESTION Q1 SINGLE
[
QUESTION_STYLESHEET="
.question_outer
{
width:800px
}
"
]
<h3>
<a href="#" onclick="$('#text_to_hide_1').toggle();">Show/hide text</a>
</h3>
<div id="text_to_hide_1">
Your first text part
</div>
<h3>
<a href="#" onclick="$('#text_to_hide_2').toggle();">Show/hide text</a>
</h3>
<div id="text_to_hide_2">
Your second text part
</div>
1:Answer option 1
2:Answer option 2
3:Answer option 3
4:Answer option 4

</source>