Fixing report questions order, closes #27. Fixing display of current …

…level, closes #26. Fixing menu style, closes #24, closes #22. Fixing navigation, closes #23.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maturity.theodi.org",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "The ODI Maturity Assessment Tool (pathway)",
   "main": "index.js",
   "scripts": {

private/css/project.css

@@ -66,6 +66,13 @@ th {
     text-align: center;
     padding: 1em;
 }
+th.level-0,
+span.level-0,
+div.level-0,
+.questions-table td.level-0 {
+    background-color: var(--color-light-grey);
+    color: var(--color-dark-blue) !important;
+}
 th.level-1,
 span.level-1,
 div.level-1,
@@ -214,6 +221,11 @@ div.level-5,
 }
 .project nav,
 .report-page nav {
+    position: sticky;
+    max-height: 100vh; /* Ensure it doesn’t overflow the viewport height */
+    overflow-y: auto; /* Allow scrolling within the nav if it’s too tall */
+    align-self: flex-start;
+    top: 0;
     min-width: 250px;
     background-color: var(--color-light-grey);
     padding: 20px;
@@ -284,12 +296,27 @@ div.level-5,
     cursor: pointer;
     z-index: 1100;
     max-height: 100px;
+    border: none !important;
+}
+.nav-toggle {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+    transform: none !important;
+}
+
+.nav-toggle:focus,
+.nav-toggle:active {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+    transform: none !important;
 }
 
 .project nav.shrunk,
 .report-page nav.shrunk {
     position: fixed;
-    top: 110px;
+    top: 100px;
     left: 0;
     height: 100%;
     transform: translateX(-100%);
@@ -451,13 +478,6 @@ div.level-5,
 .report-page nav .activity-title {
     width: 100%;
 }
-.report-page nav {
-    position: sticky;
-    max-height: 100vh; /* Ensure it doesn’t overflow the viewport height */
-    overflow-y: auto; /* Allow scrolling within the nav if it’s too tall */
-    align-self: flex-start;
-    top: 0;
-}
 
 /* Style for progress pie charts */
 .progress-pie {

private/js/edit-project.js

@@ -58,7 +58,8 @@ function createAssessmentTable(dimension, levelKeys) {
     const container = document.getElementById('assessment-container');
     dimension.activities.forEach(activity => {
         const activityContainer = document.createElement('section');
-        const activityId = activity.title.toLowerCase().replace(/\s+/g, '-');
+        const dimensionPrefix = dimension.name.toLowerCase().replace(/\s+/g, '-');
+        const activityId = dimensionPrefix + "/" + activity.title.toLowerCase().replace(/\s+/g, '-');
         activityContainer.setAttribute('id', activityId);
         activityContainer.className = 'activity';
 
@@ -309,7 +310,8 @@ function loadNavBar(data,projectId) {
 
         const activityList = document.createElement('ul');
         dimension.activities.forEach(activity => {
-            const activityId = activity.title.toLowerCase().replace(/\s+/g, '-');
+            const dimensionPrefix = dimension.name.toLowerCase().replace(/\s+/g, '-');
+            const activityId = dimensionPrefix + "/" + activity.title.toLowerCase().replace(/\s+/g, '-');
             const activityItem = document.createElement('li');
             activityItem.classList.add('nav-activity-item'); // Add class for styling
 
@@ -411,7 +413,14 @@ function updateHash(activityId) {
 
 function toggleNav() {
     const nav = document.querySelector('.project nav');
+    const toggleButton = document.querySelector('.project .nav-toggle');
     nav.classList.toggle('shrunk');
+
+    if (nav.classList.contains('shrunk')) {
+        toggleButton.innerHTML = '→'; // Right arrow
+    } else {
+        toggleButton.innerHTML = '←'; // Left arrow
+    }
 }
 
 function debounce(func, wait) {

private/js/report.js

@@ -132,7 +132,7 @@ function createDimensionDetails(dimension, levelKeys, dimensionIndex) {
 
     // Create a span to hold the level name with a class based on the achieved level
     const levelNameSpan = document.createElement('span');
-    const levelName = levelKeys[dimension.userProgress.achievedLevel - 1];
+    const levelName = levelKeys[dimension.userProgress.achievedLevel - 1] || "none";
     levelNameSpan.textContent = levelName;
     levelNameSpan.className = `level level-${dimension.userProgress.achievedLevel}`;
 
@@ -265,22 +265,31 @@ function createActivityQuestions(section, activity, levelKeys) {
             <th style="width: 20%;">Notes</th>
         `;
 
-        // Sort statements: correct answers first, then incorrect, then unanswered
+        // Sort statements first by level, then by correct/incorrect/unanswered
         const sortedStatements = statements.sort((a, b) => {
+            // Sort by associated level first
+            if (a.associatedLevel !== b.associatedLevel) {
+                return a.associatedLevel - b.associatedLevel;
+            }
+
+            // Sort by whether the question is answered
             const aAnswered = a.userAnswer ? 1 : 0;
             const bAnswered = b.userAnswer ? 1 : 0;
             if (aAnswered !== bAnswered) return bAnswered - aAnswered;
 
+            // Sort by whether the answer is correct
             const aCorrect = a.userAnswer && a.userAnswer.answer === a.positive;
             const bCorrect = b.userAnswer && b.userAnswer.answer === b.positive;
             if (aCorrect !== bCorrect) return bCorrect - aCorrect;
 
             return 0;
         });
 
+        // Create table rows for each statement
         sortedStatements.forEach(statement => {
             const row = table.insertRow();
 
+            // Add level column if required
             if (includeLevel) {
                 const levelCell = row.insertCell();
                 const levelName = levelKeys[statement.associatedLevel - 1];
@@ -292,7 +301,6 @@ function createActivityQuestions(section, activity, levelKeys) {
             questionCell.textContent = statement.text;
 
             const answerCell = row.insertCell();
-
             if (!statement.userAnswer) {
                 answerCell.textContent = '-';
             } else if (statement.userAnswer.answer === statement.positive) {
@@ -308,6 +316,7 @@ function createActivityQuestions(section, activity, levelKeys) {
         questionsDiv.appendChild(table);
     };
 
+
     const currentLevelStatements = activity.statements.filter(statement => statement.associatedLevel === activity.userProgress.achievedLevel);
     const nextLevelStatements = activity.statements.filter(statement => statement.associatedLevel === activity.userProgress.achievedLevel + 1);
     const higherLevelStatements = activity.statements.filter(statement =>
@@ -484,8 +493,7 @@ function loadNavBar(data,projectId) {
     const dimensions = data.dimensions;
     const navList = document.getElementById('navList');
 
-
-    const editItem = createNavItem('/projects/' + projectId,"<- Back to edit page");
+    const editItem = createNavItem('/projects/' + projectId, '← Back to edit page');
     navList.appendChild(editItem);
 
     const topItem = createNavItem('#assessment-contriner',"Top");
@@ -532,7 +540,14 @@ function loadNavBar(data,projectId) {
 
 function toggleNav() {
     const nav = document.querySelector('.report-page nav');
+    const toggleButton = document.querySelector('.report-page .nav-toggle');
     nav.classList.toggle('shrunk');
+
+    if (nav.classList.contains('shrunk')) {
+        toggleButton.innerHTML = '&#8594;'; // Right arrow
+    } else {
+        toggleButton.innerHTML = '&#8592;'; // Left arrow
+    }
 }
 
 document.addEventListener('DOMContentLoaded', async () => {

views/pages/projects/edit.ejs

@@ -10,7 +10,8 @@
 <% } %>
 
 <section class="white project">
-    <button class="nav-toggle" onclick="toggleNav()">☰</button>
+    <button class="nav-toggle" onclick="toggleNav()">&#8592;</button> <!-- Initially left arrow -->
+
     <nav>
         <ul id="navList">
             <!-- Dynamically populated -->

views/pages/projects/report.ejs

@@ -7,7 +7,8 @@
 
 
 <section class="white report-page">
-    <button class="nav-toggle" onclick="toggleNav()">☰</button>
+    <button class="nav-toggle" onclick="toggleNav()">&#8592;</button> <!-- Initially left arrow -->
+
     <nav>
         <ul id="navList">
             <!-- Dynamically populated -->