Category Tree Wise and Survey Name wise listing Surveys

[apmuthu]

In application/views/surveys/publicSurveyList.php in v2.0.5.1 in order to display the survey list in alphabetical order instead of the existing order in which it was created and collapsing the into a drill down category list, the following changes need to be made. Introduced some javascript and a new function at the beginning of the file as:

function order_links($list) {
    // a new dom object
    $dom = new domDocument; 
    libxml_use_internal_errors(true);
    libxml_clear_errors();
    // discard white space
    $dom->preserveWhiteSpace = false;

    $dom->loadHTML($list);
    $a = $dom->getElementsByTagName('a');
    $alpha = array();
    foreach ($a as $b) {
        $dc = utf8_decode($b->nodeValue);
        $alpha[$dc] = $b->getAttribute('href');
    }
    ksort($alpha);
    $c = '';

    $c .= '<ul id="myUL">'.chr(10).'<ul class="nested">'.chr(10);   
    $old_cat = '';

    foreach($alpha as $k => $v) {
        $cv = substr($k, 0, -4);
        if ($old_cat <> $cv) {
            $c .= '</ul>' . chr(10) . '<li><span class="caret">'. $cv . '</span>' . chr(10) . '<ul class="nested">';
            $old_cat = $cv;
        }
        $c .= '<li><a class="surveytitle" href="' . $v . '">' . $k . '</a></li>';
    }
    $c .= '</ul>';
    $c .= '
    <script>
var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}
</script>
';
    return $c;  
}

and after the first foreach stanza in the file, execute it with:

$list = order_links($list);

Then introduce the CSS in the templates/default/startpage.pstpl in the head part and in other templates as well if needed:

<style>
     /* Remove default bullets */
ul, #myUL {
  list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#myUL {
  margin: 0;
  padding: 0;
}

/* Style the caret/arrow */
.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}
</style>

LimeSurvey_Category_Display_2.05.mod.zip

[apmuthu]

Screenshot that uses the last word of the survey of 3 characters for ordering and the rest for category.

[apmuthu]

The above suffers from a z-index inherited issue and hence a pure html collapsible menu with no added CSS and JS elements has been hammered out as below.

In application/views/surveys/publicSurveyList.php in v2.0.5.1 in order to display the survey list in alphabetical order instead of the existing order in which it was created and collapsing the into a drill down category list, the following changes need to be made. Introduced a new function at the beginning of the file after the first foreach stanza and have it called as:

function order_links($list) {
    // a new dom object
    $dom = new domDocument; 
    libxml_use_internal_errors(true);
    libxml_clear_errors();
    // discard white space
    $dom->preserveWhiteSpace = false;

    $dom->loadHTML($list);
    $a = $dom->getElementsByTagName('a');
    $alpha = array();
    foreach ($a as $b) {
        $dc = utf8_decode($b->nodeValue);
        $alpha[$dc] = $b->getAttribute('href');
    }
    ksort($alpha);
    $c = '';

    $old_cat = '';
    $flag = true; // first pass
    foreach($alpha as $k => $v) {
        $cv = substr($k, 0, -4);
        if ($old_cat <> $cv) {
            if (!$flag) $c .= '</ul></details>';
            $flag = false;
            $c .= '<details><summary><span class="caret">'.$cv.'</span></summary>' . chr(10) . '<ul class="nested">';
            $old_cat = $cv;
        }
        $c .= '<li><a class="surveytitle" href="' . $v . '">' . $k . '</a></li>';
    }
    $c .= '</ul></details>';

    return $c;  
}

$list = order_links($list);

The screenshot above remains the same.

LS205_collapsed_category_menu_mod.zip