Vignettes

.config/commands/docker.justfile

@@ -118,7 +118,7 @@ db-tear-down:
     echo -e "\033[33mIgnore the error 'Resource is still in use' for the development_default network\033[0m"
     cd {{justfile_directory()}}/docker/development/
     docker compose down db --volumes
-    docker-compose up -d --force-recreate db
+    docker compose up -d --force-recreate db
     just docker wait-for-postgres
 
 # Removes the development docker containers

.config/commands/utils.justfile

@@ -66,5 +66,12 @@ erd:
         exclude="${exclude_default},Claimable,Editable,Teachable" \
         only="Lecture,Lesson,Chapter,Section,Item,LessonSectionJoin,Term"
 
+    # 🌟 Vignettes
+    docker compose exec -it mampf rake erd warn=false \
+        title="Vignettes" filename=/usr/src/app/tmp/erd/mampf-erd-vignettes \
+        inheritance=true polymorphism=true indirect=true attributes=content \
+        exclude="${exclude_default},Claimable,Editable,Teachable,Notifiable,Record" \
+        only="Vignettes::Questionnaire, Vignettes::Slide, Vignettes::InfoSlide, Vignettes::Answer, Vignettes::UserAnswer, Vignettes::Question, Vignettes::SlideStatistic, Vignettes::LikertScaleAnswer, Vignettes::LikertScaleQuestion, Vignettes::MultipleChoiceAnswer, Vignettes::MultipleChoiceQuestion, Vignettes::TextQuestion, Vignettes::TextAnswe, Vignettes::LikertScaleAnswer, Vignettes::LikertScaleQuestion, Vignettes::MultipleChoiceAnswer, Vignettes::MultipleChoiceQuestion, Vignettes::TextQuestion, Vignettes::TextAnswer, Vignettes::Option"
+
     echo "📂 Diagrams are ready for you in the folder {{justfile_directory()}}/tmp/erd/"
     echo "🔀 For the meanings of the arrows, refer to https://voormedia.github.io/rails-erd/gallery.html#notations"

.config/eslint.mjs

@@ -101,6 +101,8 @@ const customGlobals = {
   renderMathInElement: "readable",
 
   openAnnotationIfSpecifiedInUrl: "readable",
+
+  Sortable: "readable",
 };
 
 export default [

.gitignore

@@ -39,6 +39,9 @@ coverage
 # Ignore shrine store
 /public/uploads
 
+# Ignore activeStorage uploads
+/storage/*
+
 # Ignore environment variables
 completed_initial_run
 /public/uploads.zip

.rspec

@@ -0,0 +1 @@
+--require spec_helper

.vscode/settings.json

@@ -123,6 +123,7 @@
         "justfile",
         "katex",
         "lightgray",
+        "likert",
         "localroot",
         "mailcatcher",
         "mampf",

app/assets/config/manifest.js

@@ -1,4 +1,5 @@
 //= link_tree ../images
+//= link_directory ../javascripts/vignettes .js
 //= link_directory ../javascripts .js
 //= link_directory ../stylesheets .css
 //= link commontator/manifest.js

app/assets/javascripts/vignettes/edit.js.erb

@@ -0,0 +1,107 @@
+// When using turbolinks, the event is not fired on redirect
+$(document).ready(function () {
+  const vignetteSlideList = $("#vignettes-slides-accordion");
+  createSortableVignetteSlides(vignetteSlideList);
+  registerVignetteSlideListeners(vignetteSlideList);
+  registerNewSlideButtonListener(vignetteSlideList);
+});
+
+function createSortableVignetteSlides(vignetteSlideList) {
+  Sortable.create(vignetteSlideList.get(0), {
+    animation: 150,
+    filter: ".accordion-collapse",
+    preventOnFilter: false,
+    onEnd: function (evt) {
+      if (evt.oldIndex == evt.newIndex) return;
+
+      let questionnaire_id = evt.target.dataset.questionnaireId;
+      $.ajax({
+        url: `/questionnaires/${questionnaire_id}/update_slide_position`,
+        method: "PATCH",
+        data: {
+          old_position: evt.oldIndex,
+          new_position: evt.newIndex,
+        },
+        success: function (_response) {
+          console.log(`Slide was moved from position ${evt.oldIndex} to ${evt.newIndex}`);
+        },
+        error: function (xhr, status, error) {
+          console.error(`Failed to update position: ${error}`);
+        },
+      });
+    },
+  });
+}
+
+function registerVignetteSlideListeners(vignetteSlideList) {
+  $(".vignette-accordion-collapse").on("shown.bs.collapse", function (evt) {
+    const slideId = evt.target.dataset.slideId;
+    if (slideId === undefined) {
+      // multiple choice options are also collapsible
+      // and trigger shown.bs.collapse
+      return;
+    }
+
+    const questionnaireId = vignetteSlideList.attr("data-questionnaire-id");
+    if (questionnaireId === undefined) {
+      console.error("Questionnaire id is missing");
+      return;
+    }
+
+    const loadingSpinner = $(`#vignette-slide-loading-${slideId}`);
+    let spinnerTimeout = setTimeout(function () {
+      loadingSpinner.show();
+    }, 100); // avoid flickering when loading is fast
+
+    $.ajax({
+      url: Routes.edit_questionnaire_slide_path(questionnaireId, slideId),
+      method: "GET",
+      dataType: "html",
+      success: function (response) {
+        $(vignetteSlideList).find(".slides-edit-form-container").html("");
+        const editFormContainer = $(`#slide-edit-form-container-${slideId}`);
+        editFormContainer.hide().html(response).ready(function () {
+          clearTimeout(spinnerTimeout);
+          loadingSpinner.hide();
+          editFormContainer.show();
+        });
+      },
+      error: function (xhr, status, error) {
+        clearTimeout(spinnerTimeout);
+        console.error(`Failed to load slide edit form: ${error}`);
+      },
+    });
+  });
+}
+
+function registerNewSlideButtonListener(vignetteSlideList) {
+  $("#vignettes-new-slide-btn").click(function () {
+    $(this).prop("disabled", true);
+
+    const questionnaireId = vignetteSlideList.attr("data-questionnaire-id");
+    if (questionnaireId === undefined) {
+      console.error("Questionnaire id is missing");
+      return;
+    }
+
+    $.ajax({
+      url: Routes.new_questionnaire_slide_path(questionnaireId),
+      method: "GET",
+      dataType: "html",
+      success: function (response) {
+        $(vignetteSlideList).append(response);
+        const newSlide = $(vignetteSlideList).children().last();
+        openAccordionItem(newSlide);
+      },
+      error: function (xhr, status, error) {
+        console.error(`Failed to load new slide form: ${error}`);
+      },
+    });
+  });
+}
+
+function openAccordionItem($item) {
+  new bootstrap.Collapse($item.find(".collapse"), {
+    toggle: true,
+  });
+}

app/assets/javascripts/vignettes/edit_slide.js.erb

@@ -0,0 +1,5 @@
+$(document).ready(function () {
+  new TomSelect("#vignettes-linked-info-slides", {
+    plugins: ["remove_button"],
+  });
+});

app/assets/javascripts/vignettes/question_type.js

@@ -0,0 +1,55 @@
+var QUESTION_TYPE_SELECT_ID = "#vignettes-question-type-select";
+
+$(document).ready(function () {
+  handleQuestionTypes();
+  updateQuestionFieldState($(QUESTION_TYPE_SELECT_ID).val());
+  new TomSelect(QUESTION_TYPE_SELECT_ID, { allowEmptyOption: true });
+  handleMultipleChoiceEditor();
+});
+
+function handleQuestionTypes() {
+  const questionTypeDropdown = $(QUESTION_TYPE_SELECT_ID);
+
+  questionTypeDropdown.on("change", function (event) {
+    updateQuestionFieldState(event.target.value);
+  });
+}
+
+function updateQuestionFieldState(selectedName) {
+  const multipleChoiceField = $("#vignette-edit-multiple-choice");
+  const questionTextField = $("#vignette-question-text");
+
+  // Type "No question"
+  if (selectedName === "") {
+    questionTextField.find("textarea").val("");
+    questionTextField.collapse("hide");
+  }
+  else {
+    questionTextField.collapse("show");
+  }
+
+  if (selectedName === "Vignettes::MultipleChoiceQuestion") {
+    multipleChoiceField.collapse("show");
+  }
+  else {
+    multipleChoiceField.collapse("hide");
+  }
+}
+
+function handleMultipleChoiceEditor() {
+  // Adding an option
+  $("#vignette-multiple-choice-add").click(function (_evt) {
+    const template = $("#vignette-multiple-choice-options-template");
+    const newOptionHtml = template.html();
+    const uniqueId = new Date().getTime();
+    const newBlockHtml = newOptionHtml.replace(/NEW_RECORD/g, uniqueId);
+    $("#vignette-multiple-choice-options").append(newBlockHtml);
+  });
+
+  // Removing an option
+  $(document).on("click", ".remove-vignette-mc-option", function (evt) {
+    const parentDiv = $(evt.target).closest("div");
+    parentDiv.find(".vignette-mc-hidden-destroy").val("1");
+    parentDiv.removeClass("d-flex").hide();
+  });
+}

app/assets/javascripts/vignettes/take_questionnaire.js

@@ -0,0 +1,170 @@
+var VIGNETTE_FORM_ID = "#vignettes-answer-form";
+function shouldRegisterVignette() {
+  return $(VIGNETTE_FORM_ID).length > 0;
+}
+
+$(document).on("turbolinks:load", () => {
+  if (!shouldRegisterVignette()) {
+    return;
+  }
+
+  registerSubmitHandler();
+  registerTextAnswerValidator();
+
+  const stats = new VignetteSlideStatistics();
+  registerStatisticsHandler(stats);
+});
+
+function registerSubmitHandler() {
+  $(VIGNETTE_FORM_ID).submit((event) => {
+    let isValid = false;
+    isValid = validateTextAnswer();
+
+    if (!isValid) {
+      event.preventDefault();
+      return false;
+    }
+  });
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Text Answer Fields
+////////////////////////////////////////////////////////////////////////////////
+var TEXT_ANSWER_ID = "vignettes_answer_text";
+
+function registerTextAnswerValidator() {
+  const textBody = document.getElementById(TEXT_ANSWER_ID);
+  if (!textBody) {
+    return;
+  }
+  $(textBody).on("input", () => {
+    validateTextAnswer();
+  });
+}
+
+function validateTextAnswer() {
+  const textBody = document.getElementById(TEXT_ANSWER_ID);
+  if (!textBody) {
+    return true;
+  }
+
+  let isValid = false;
+
+  const validityState = textBody.validity;
+  if (validityState.tooShort) {
+    const tooShortMessage = textBody.dataset.tooShortMessage;
+    textBody.setCustomValidity(tooShortMessage);
+  }
+  else if (validityState.valueMissing) {
+    const valueMissingMessage = textBody.dataset.valueMissingMessage;
+    textBody.setCustomValidity(valueMissingMessage);
+  }
+  else {
+    // render input valid, so that form will submit
+    textBody.setCustomValidity("");
+    isValid = true;
+  }
+
+  textBody.reportValidity();
+  return isValid;
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Statistics
+////////////////////////////////////////////////////////////////////////////////
+
+class VignetteSlideStatistics {
+  slideStartTime = new Date();
+  totalSlideTime = 0;
+
+  infoSlideAccessCounts = {};
+  infoSlideStartTime = null;
+  infoSlideTimes = {};
+
+  increaseInfoSlideAccessCount(index) {
+    this.infoSlideAccessCounts[index] ??= 0;
+    this.infoSlideAccessCounts[index]++;
+  }
+
+  freezeSlideTime() {
+    if (this.slideStartTime === null) {
+      console.error("Attempted to freeze slide time when it was already frozen");
+      return;
+    }
+    this.totalSlideTime += (Date.now() - this.slideStartTime);
+    this.slideStartTime = null;
+  }
+
+  unfreezeSlideTime() {
+    this.slideStartTime = Date.now();
+  }
+
+  startInfoSlideTimer() {
+    this.infoSlideStartTime = Date.now();
+  }
+
+  stopInfoSlideTimer(index) {
+    if (this.infoSlideStartTime === null) {
+      console.error("Attempted to stop info slide timer when it was already stopped");
+      return;
+    }
+    const timeOnInfoSlide = (Date.now() - this.infoSlideStartTime);
+    this.infoSlideTimes[index] = (this.infoSlideTimes[index] || 0.0) + timeOnInfoSlide;
+    this.infoSlideStartTime = null;
+  }
+
+  postProcessTimes() {
+    for (let key in this.infoSlideTimes) {
+      this.infoSlideTimes[key] = Math.floor(this.infoSlideTimes[key] / 1000);
+    }
+    this.totalSlideTime = Math.floor(this.totalSlideTime / 1000);
+  }
+}
+
+function registerStatisticsHandler(stats) {
+  // Info Slide - Opening
+  const openInfoSlideButtons = $(".open-info-slide-btn");
+  if (!openInfoSlideButtons) {
+    return;
+  }
+  openInfoSlideButtons.each(function () {
+    const index = $(this).attr("data-info-slide-index");
+    $(this).click(() => {
+      stats.freezeSlideTime();
+      stats.increaseInfoSlideAccessCount(index);
+      stats.startInfoSlideTimer();
+    });
+  });
+
+  // Info Slide - Closing
+  const infoSlideModals = $(".vignette-info-slide-modal");
+  if (!infoSlideModals) {
+    console.error("No info slide modals found");
+    return;
+  }
+  infoSlideModals.each(function () {
+    $(this).on("hidden.bs.modal", function () {
+      const index = $(this).attr("data-info-slide-index");
+      stats.stopInfoSlideTimer(index);
+      stats.unfreezeSlideTime();
+    });
+  });
+
+  // Form Submission
+  $(VIGNETTE_FORM_ID).submit(() => {
+    // Take rest of time into account
+    if (stats.slideStartTime) {
+      stats.freezeSlideTime();
+    }
+
+    stats.postProcessTimes();
+
+    // Transfer results to hidden form-fields
+    const timeOnSlideField = $("#time-on-slide-field");
+    const timeOnInfoSlidesField = $("#time-on-info-slides-field");
+    const infoSlidesAccessCountField = $("#info-slides-access-count-field");
+    timeOnSlideField.val(stats.totalSlideTime);
+    timeOnInfoSlidesField.val(JSON.stringify(stats.infoSlideTimes));
+    infoSlidesAccessCountField.val(JSON.stringify(stats.infoSlideAccessCounts));
+  });
+}