QUT Home

Web Code & Key Survey

Key Survey allows you to write code "in-line" with your survey questions in "Standard", "Quick" or "Classic" modes.

NOTE: This information is a little more technical and provided for users who want to learn more about Key Survey's advanced features. Demonstrations using code can be found in our Video Tutorials.

How do I use web code with Key Survey?

  1. Log into your account and "edit" your survey questions.
  2. For Questions (Section 2):
    • Click the "Toggle WYSIWYG Editor" link to turn the toolbars off.
  3. For Answer Options (Section 3 or 4):
    • Click the "Standard" or "Quick" link to turn rich text off.
  4. Select the text that you wish stylise.
  5. Write your web code around it.
  • Example image - Use web code while editing questions:
    • Example image - You can add code to any question type while editing it.

I don't know any web code. Can I still use this feature?

YES, you can. There are a number of online resources that can help you learn about web code:

NOTE: Survey Support can also assist you, however it is NOT their responsibility to write web code for you or teach HTML/CSS.

Commonly used tags

  • <a href=" "></a>
    • Create a web link (or hyperlink) anywhere in your survey.
    • a = Anchor (create an anchor tag).
    • href = Hypertext Reference (or web address, location of an online file).
    • Example:
      • <a href="http://yourlink.in.here"> Your link name </a>
  • <br/>
    • Insert a line break between content sections.
  • <div></div>:
    • Create a box that you can use to apply independent styles.
  • <em></em>
    • Italicise or "Emphasise" the text bewteen your tags.
  • <h1></h1>
    • Create a large, high level heading for your text.
  • <h2></h2>
    • Create a sub-heading for your "h1" heading.
  • <img src=" " alt=" " title=" " />
    • Insert an online picture anywhere in your survey.
    • img = Image (create an image tag).
    • src = Source (or image location).
    • alt = Alternate text (text that appears if the image cannot be loaded).
    • title = Text that becomes visible if you mouse over the image.
  • <p></p>:
    • Creates a paragragh for your content.
  • <span></span>
    • Reserve a specific amount of space to apply independent styles.
  • <strong></strong>
    • Bold the text between your tags.

Hints for using web code in Key Survey

  • Most web tags are used in pairs.
  • Paired tags are closed with a "closing tag" (i.e. a tag with a forward-slash "/").
  • For multiple tag pairs around the same content, tag orders are important:
    • Think of them like "headphones".
    • Example: <em><strong>My text</strong></em>
  • Single web tags (e.g. an image tag) close themselves with a forward slash ("/") at the end of their expressions.
  • To use styles in-line, you will need to include a "style=" in your opening tags (examples below):
    • <div style=" "></div>
    • <span style=" "></span>
    • <p style=" "></p>
  • CSS Styles are written inside the quotation marks and separated with semi-colons:
    • Example: <div style="font-weight: bold; padding: 1em;"></div>
  • You can align your content by adding "align=" in your opening tags:
    • Example: <div align="center" style=" "></div>
    • You can align your content to the left, right or center.
  • In-line styles are generally best used in tags that contain content rather than ones that stylise it.
  • CSS on a separate "CSS Styles" page does not need a "style=" in front of it:
    • Example: .styleClass { font-weight: bold; padding: 1em; }
    • .styleClass = The dot tells the browser that this is a class called "styleClass".
    • { } = All of your styles are written inside curly braces instead of quotation marks.
    • font-weight: bold; = Your styles are written in the same way with each item separated by a semi-colon.
    • Style Classes are written inside the "CSS Styles" page:
      • In order to use a CSS sheet class you will need to call it in the opening tag:
      • EXAMPLE: <div class="styleClass"></div>
      • NOTE: Your custom class's name does NOT include the dot when it's called in a question. It is a lot cleaner to use this method rather than write a lot of in-line code.