HTML Output Structure and Control

More
1 year 10 months ago - 1 year 10 months ago #129310 by PaulC
PaulC created the topic: HTML Output Structure and Control
I'm fairly knew to LimeSurvey, but so far I'm really liking it. Thank you to all the people who have had a hand in it. One issue that has been a challenge is the less-than-ideal structure of HTML output and limited control to change/improve it.

For example, I would say that well-structured code would look something like this:
<html>
<head>...</head>
<body>
  <header>
    <div class="container">...</div>
  </header>
  <main>
    <div class="container">
      <form>
        <section id="section-#" class="group">
          <header>
            <div class="title">...</div>
            <div class="description">...</div>
          </header>
          <div id="question-#" class="question">...</div>
          ...
          <div id="question-#" class="question">...</div>
          <div class="inputs hidden">
            <input type="hidden">
            ...
            <input type="hidden">
          </div>
        </section>
        <section id="section-#" class="group">...</section>
        <div class="inputs hidden">
          <input type="hidden">
          ...
          <input type="hidden">
        </div>
      </form>
    </div>
  </main>
  <footer>
    <div class="container">
      <progress>...</progress>
      <nav>...</nav>
      ...
    </div>
  </footer>
  <script>...</script>
  ...
  <script>...</script>
</body>
</html>

But right now, we have something like this:
<html>
<head>...</head>
<body>
  <script type="text/javascript">...</script>
  <header>
    <div class="container">...</div>
  </header>
  <div>
    <div>
      <div>
        <script type="text/javascript">...</script>
        <form>
          <input type="hidden">
          ...
          <input type="hidden">
          <div>
            <div class="header">...</div>
          </div>
          <div>
            <div class="more-header">...</div>
          </div>
          <div id="group-#">
            <div>
              <div class="group-title">...</div>
            </div>
            <div>
              <div class="group-title">...</div>
            </div>
            <div id="question#">...</div>
            ...
            <div id="question#">...</div>
            <input type="hidden">
          </div>
          ...
          <div id="group-#">...</div>
          <div>
            <div>
              <div>
                <div class="progress-bar">...</div>
              </div>
            </div>
          </div>
          <script type="text/javascript">... ... ...</script>
          <input type="hidden">
          ...
          <input type="hidden">
          <div>
            <div id="navigator-container">...</div>
          </div>
          <input type="hidden">
          ...
          <input type="hidden">
        </form>
      </div>
    </div>
  </div>
  <script type="text/javascript">...</script>
  ...
  <script type="text/javascript">...</script>
</body>
</html>

There is not only a lot of unnecessary nesting, but there is also a lot of nesting that is missing where it would be appropriate. Additionally, there are a lot of elements that are out of place (e.g. inputs and scripts). This makes the code hard to read and hard to maintain.

Aside from structure, there is also the issue of control and manipulation. For example, the div for question groups has no class. If I want to style the groups using CSS, I have to derive the selector using other elements. I would add it on my template, but that part of the code is created outside any template file. Everything on the page from <html> down should be coded in the template files. Nearly all the modules have {keyword} keywords right now. It not only doesn't make sense to arbitrarily remove the aforementioned outputs from the control of the template, but it can also create unintended side effects like the one I mentioned.

I was able to use Javascript to manipulate the HTML to get the code I needed, but it was work that shouldn't have been necessary:
function addElements() {
	var theStart, theEnd;
	theStart = $('form > header');
	theEnd = $('.navigator-table');
	theStart.nextUntil(theEnd).wrapAll('<main>');
	theStart = $('form > main');
	theEnd = $('form:last-child');
	theStart.nextUntil(theEnd).wrapAll('<footer>');
	$().before('</main><footer>');
	$('form').append('</footer>');
}

Thanks again to the people who have clearly put in a lot of work into a great open-source project. I hope my observations will be useful in further improvements.

-Paul
Last Edit: 1 year 10 months ago by PaulC. Reason: Minor code edit

Please Log in to join the conversation.

More
1 year 10 months ago #129313 by DenisChenu
DenisChenu replied the topic: HTML Output Structure and Control
Hi,

You can do your own template (for example : div for question group : adding question-wrapper class).

And if you have advice : please test 2.50 and report bug. LouisGac working on the new HTML

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now