Difference between revisions of "Fold in/out texts in question text"

From Catglobe Wiki
Jump to: navigation, search
m (→‎Challenge)
 
(4 intermediate revisions by 2 users not shown)
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.  
 +
*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]]
 +
 
 +
=== Code  ===
  
−
==Code==
 
 
<source lang="html4strict">
 
<source lang="html4strict">
 
QUESTIONNAIRE[HTML=true]
 
QUESTIONNAIRE[HTML=true]
 
QUESTION Q1 SINGLE
 
QUESTION Q1 SINGLE
 
[
 
[
−
QUESTION_STYLESHEET="
+
  QUESTION_STYLE_SHEET="
−
.question_outer
+
  .question_outer
−
{
+
  {
−
width:800px
+
    width:800px
−
}
+
  }
−
"
+
  "
 
]
 
]
−
<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
Line 42: Line 69:
  
 
</source>
 
</source>
 +
 +
=== Source ===
 +
Questionnaire Resource Id on cg site: 159730

Latest revision as of 12:20, 11 January 2012

Fold in/out texts in question text

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.

Example

Fold in-out texts.png

Fold in-out texts - 2.png

Solution

  • 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.

FoldIn OutTextsInQuestionText.png

Code

QUESTIONNAIRE[HTML=true]
QUESTION Q1 SINGLE
[
  QUESTION_STYLE_SHEET="
  .question_outer
  {
    width:800px
  }
  "
]
<table>
  <tr>
    <td>
      <h3>
        <a href="#" onclick="$('#text_to_hide_1').toggle();">Show/hide text</a>
      </h3>
    </td>
  </tr>
  <tr>
    <td>
      <div id="text_to_hide_1">
        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
2:Answer option 2
3:Answer option 3
4:Answer option 4

Source

Questionnaire Resource Id on cg site: 159730

Retrieved from "http://wiki.catglobe.com/index.php?title=Fold_in/out_texts_in_question_text&oldid=23455"