Compare revisions

# From template at https://gitlab.com/pages/hugo

# Runner configuration

default:

  # The `hugo_extended` image is required because our theme needs SCSS compilation

  # (see https://gohugo.io/installation/linux/#editions)

  # The image is pinned to an explicit version number to avoid bugs introduced

  # by an automatic upgrade

  image: "${CI_TEMPLATE_REGISTRY_HOST}/pages/hugo/hugo_extended:0.128.1"

variables:

  GIT_SUBMODULE_STRATEGY: recursive  # include Hugo themes

  GIT_SUBMODULE_FORCE_HTTPS: true  # the GitLab runner doesn't have SSH to clone

  HUGO_ENV: production

# Jobs configuration

# In this project, the Hugo directory (with `hugo.toml`, `content/` etc...) is

# not the Git root dir, but a subfolder `macao`. This requires a bit of extra

# config for some jobs.

test:

  # The `test` job just tries to build the site, runs on all branches except

  # the default

  script:

    - cd macao  # move to the hugo dir

    - hugo

  rules:

    - if: $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH

pages:

  # The `pages` job builds the site to the `public` dir for Pages to publish,

  # runs only on the default branch

  script:

    - cd macao

    - hugo

  # Declare an artifact, the job's output

  artifacts:

    paths:

      - macao/public

  # Config for Pages: directory to serve (default is 'public')

  publish: macao/public

  rules:

    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

  environment: production

[submodule "macao/themes/hugo-pure"]

	path = macao/themes/hugo-pure

	url = https://github.com/undus5/hugo-pure

[submodule "macao/themes/hugo-book"]

[submodule "macao/themes/hugo-book"]

	path = macao/themes/hugo-book

	path = macao/themes/macao-hugo-theme

	url = https://github.com/alex-shpak/hugo-book

	url = ../macao-hugo-theme.git

# Default ignored files

/shelf/

/workspace.xml

# Editor-based HTTP Client requests

/httpRequests/

.idea

<?xml version="1.0" encoding="UTF-8"?>

<module type="WEB_MODULE" version="4">

  <component name="NewModuleRootManager">

    <content url="file://$MODULE_DIR$">

      <excludeFolder url="file://$MODULE_DIR$/temp" />

      <excludeFolder url="file://$MODULE_DIR$/.tmp" />

      <excludeFolder url="file://$MODULE_DIR$/tmp" />

    </content>

    <orderEntry type="inheritedJdk" />

    <orderEntry type="sourceFolder" forTests="false" />

  </component>

</module>

 No newline at end of file

<?xml version="1.0" encoding="UTF-8"?>

<project version="4">

  <component name="ProjectModuleManager">

    <modules>

      <module fileurl="file://$PROJECT_DIR$/.idea/macao-hugo.iml" filepath="$PROJECT_DIR$/.idea/macao-hugo.iml" />

    </modules>

  </component>

</project>

 No newline at end of file

<?xml version="1.0" encoding="UTF-8"?>

<project version="4">

  <component name="VcsDirectoryMappings">

    <mapping directory="" vcs="Git" />

    <mapping directory="$PROJECT_DIR$/macao/themes/macao-hugo-theme" vcs="Git" />

  </component>

</project>

 No newline at end of file

# Macao-Hugo

# Macao-Hugo

Expérimentation avec le *static site generator* [Hugo](https://gohugo.io/) pour Macao-New

# Setup

 Portage de l'application MACAO (Module d'Aide à la Compréhension de l'Anglais Oral), basé sur le générateur de site statique [Hugo](https://gohugo.io/) et la bibliothèque [SurveyJS](https://surveyjs.io/form-library/documentation/overview)

[![License: GPLv3](https://img.shields.io/badge/License-GPLv3-blue.svg)](LICENSE)

# Démo. avec Gitlab Pages

https://macao.pages.tetras-libre.fr/macao-hugo/

# Installation pour le développent

- [Installer Hugo](https://gohugo.io/installation/) **(version 0.124 minimum)**

- [Installer Hugo](https://gohugo.io/installation/) **(version 0.124 minimum)**

- `git clone gitlab@gitlab.tetras-libre.fr:macao/macao-hugo.git`

- `git clone --recurse-submodules gitlab@gitlab.tetras-libre.fr:macao/macao-hugo.git`

- `cd macao-hugo/macao`

- `cd macao-hugo/macao`

Pour lancer en mode développement avec live reload : `hugo server`

Pour lancer en mode développement avec live reload : `hugo server`

Pour build le site statique : `hugo`  

Pour build le site statique : `hugo`  

Le contenu de `public/` peut être publié avec n'importe quel serveur HTTP statique.

Le contenu de `public/` peut être publié avec n'importe quel serveur HTTP statique.

# Licences

Ce projet, à l'exception des répertoires `macao/content` et `static/media`, est distribué sous licence [GNU GPLv3](https://www.gnu.org/licenses/gpl-3.0.html), dont les termes sont décrits dans le fichier [`LICENSE`](./LICENSE).

Le contenu des répertoires `macao/content` et `static/media` utilise une licence séparée, décrite dans le fichier [`macao/content/LICENSE.md`](./macao/content/LICENSE.md)

 No newline at end of file

public/

public/

resources/_gen/

resources/_gen/

.hugo_build.lock

.hugo_build.lock

/content/tests/

# Activity content is generated by the Macao-Legacy converter, will be added to Git when final

.idea

content/activities/*

---

title: "{{ replace .Name "-" " " | title }}"

date: {{ .Date }}

draft: true

---

body {

  // Global theme colors are defined in macao/themes/macao-hugo-theme/assets/_defaults.scss and go to @mixin theme-tetras

  --quizz-backgourd-color: #00000;

  --feedback-sucess-color: #FFF2CC;

  --feedback-error-color: #FFF2CC;

}

// ***********************************

// Global

// ***********************************

* {

line-height: 1.2 !important

}

img.inlineImage {

  vertical-align: middle;

  height: 1em;

}

img.inlineImage12 {

  vertical-align: middle;

  height: 1.2em;

}

img.inlineImage14 {

  vertical-align: middle;

  height: 1.4em;

}

img.inlineImage16 {

  vertical-align: middle;

  height: 1.6em;

}

img.inlineImage18 {

  vertical-align: middle;

  height: 1.8em;

}

img.inlineImage2 {

  vertical-align: middle;

  height: 2em;

}

img.inlineImage22 {

  vertical-align: middle;

  height: 2.2em;

}

img.inlineImage24 {

  vertical-align: middle;

  height: 2.4em;

}

img.inlineImage26 {

  vertical-align: middle;

  height: 2.6em;

}

img.inlineImage28 {

  vertical-align: middle;

  height: 2.8em;

}

img.inlineImage3 {

  vertical-align: middle;

  height: 3em;

}

.btn-play {

  cursor: pointer;

  background-color: var(--macao-primary-color);

  border-radius: 5px;

  border: none;

  padding: 5px 10px;

  color: white;

}

.notextplay {

  font-size: 0; /* hides text */

  color: white;

}

.notextplay i {

  font-size: medium; /* keep icon visible */

}

p#gapfill-container {

  white-space: pre-wrap;

  line-height: 3em;

}

// Tweak the existing SurveyJS styles to have "inline" dropdown menus

// and text fields that don't take too much space

select.sd-dropdown.inline-dropdown, input.sd-input.inline-input {

  display: inline-block;

  width: fit-content;

  padding: 8px;

}

// ***********************************

// User Feedback in quizz

// ***********************************

#correct-indic.incorrect {

  background-color: var(--feedback-error-color);

}

#correct-indic.correct {

  background-color: var(--feedback-sucess-color);

}

#correct-indic {

  border-radius: 8px;

  padding: 16px;

  p {

    margin: 0;

  }

}

// ***********************************

// Hide disabled checkboxes in some quizz

// ***********************************

.hide-disabled-checkboxes {

  .sd-checkbox--readonly {

    span.sd-checkbox__decorator {

      display: none;

    }

  }

}

// ***********************************

// Align one line radio buttons

// ***********************************

.one-line {

  display: flex;

  align-items: center;

  .sd-question__header {

    margin-top: 0;

    max-width: 150px;

  }

}

// ***********************************

// General look and feel

// ***********************************

.book-page > article {

  background-color: var(--secondary-background-color);

  border-radius: 15px;

}

.book-page > article {

  padding: 16px;

  margin-top: 16px;

}

.book-search {

  border-radius: 10px;

  padding: 0px 5px;

  background-color: var(--secondary-background-color);

}

a {

  color: var(--macao-primary-color);

}

a:visited {

  color: var(--macao-primary-color) !important;

}

a.active {

  color: var(--macao-secondary-font-color) !important;

  background-color: var(--macao-primary-color);

  border-radius: 5px;

  padding: 5px;

  margin-right: 5px;

}

// Hide element when width is less than 900px

@media (min-width: 900px) {

  .book-icon {

    display: none;

  }

}

.sd-btn {

  padding: 5px 10px !important;

}

// ***********************************

// Comment on page

// ***********************************

.comment-trigger {

  cursor: pointer;

  color: var(--macao-primary-color);

  text-decoration: underline;

}

em:not(:has(strong)) {

    background-color: lightgray;

    padding: 3px;

    padding-right: 4px;

    border-radius: 5px;

}

// ***********************************

// Dropdowns

// ***********************************

// Min width for dropdowns

.sv-dropdown_select-wrapper {

  min-width: 150px !important;

}

// ***********************************

// .sv-title-actions__title

// ***********************************

.sv-title-actions__title {

  white-space: break-spaces !important;

}

.one-line {

  .sd-question__header {

    max-width: 60%;

  }

  .sv-string-viewer {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    max-width: 100%;

    flex-wrap: wrap;

  }

}

/* Base style for buttons with the class "block" */

button.block {

    background-color: white; /* White background */

    border: 2px solid black; /* Black border */

    color: black; /* Transparent text color to hide any text */

    padding: 5px 10px; /* Padding around the button */

    display: inline-block; /* Display as inline-block */

    font-size: 14px; /* Font size */

    margin: 2px; /* Margin around the button */

    cursor: pointer; /* Pointer cursor on hover */

    border-radius: 2; /* No rounded corners */

    vertical-align: middle; /* Vertically align the button */

    text-align: center; /* Center the text */

    width: calc(10px + 50px * var(--duration)); /* Width proportional to the duration attribute */

    height: 30px;

    overflow: hidden; /* Hide overflow text */

    white-space: nowrap; /* Prevent text from wrapping */

    text-overflow: ellipsis; /* Add ellipsis if text overflows */

}

/* Additional style for buttons with both "block" and "outlined" classes */

button.block.outlined {

    background-color: transparent; /* Transparent background */

    border: 2px solid orange; /* Orange border */

}

/* Set the --duration CSS variable based on the duration attribute */

button.block {

    --duration: 0; /* Default duration */

}

button.block[duration] {

    --duration: attr(duration numeric, 0);

}

@import "plugins/_scrollbars.scss";

console.log('Custom JS loaded');

$(document).ready(function() {

    console.log('Custom JS executed');

    // Add specific classes to play buttons

    $('button:contains("Play")').html('<i class="fa-solid fa-play"></i> Écouter').addClass('btn-play').prop('title','Écouter');

    // Add Title on top of the page

    $('.book-header').show();

    $('.commentaireInfo').hide();

    // $('.commentaireInfo').prop('popover', 'auto');

    $('.commentaireInfoGroup').show();

    // Comment popover

    $('[spanid]').addClass('comment-trigger').each(function (){

        const spanid = $(this).attr('spanid');

        if($("[commentaireid=" + spanid + "]").length !== 0) {

            $(this).popover({

                trigger: 'click',

                html: true,

                placement: 'auto',

                content: $("[commentaireid=" + spanid + "]")

            });

            $("[commentaireid=" + spanid + "]").toggle()

        }

    });

    // $(document).on('click', function() {

    //     $('[spanid]').popover('hide');

    // });

    // Simplify th in td

    $('th').each(function () {

        // Store the current content of the <th>

        const content = $(this).html();

        // Replace <th> with a <td> containing the same content

        $(this).replaceWith(`<td>${content}</td>`);

    });

    // Tricky way to add gap between play button and the next element

    // like http://localhost:1313/macao-hugo/activities/mosorgmacao_fusion_ss_barre/mosmod10/mosmod11/mosetp129/pg334/

    $(".btn-play").parent().siblings().css("margin-top", "10px")

    if ($(window).width() > 900) {

        $('.book-icon').hide();

    }

});

document.addEventListener('DOMContentLoaded', function() {

    // Select all buttons with the class 'block'

    const buttons = document.querySelectorAll('button.block');

    // Loop through each button and set the width and label

    buttons.forEach(function(button) {

        const duration = parseFloat(button.getAttribute('duration'));

        if (!isNaN(duration)) {

            // Set the width proportional to the duration

            button.style.width = `calc(50px + 50px * ${duration})`;

        }

        const label = button.getAttribute('label');

        if (label) {

            // Set the button's text content to the label attribute

            button.textContent = label;

        } else {

            // If no label attribute, clear the text content

            button.textContent = '';

        }

    });

});

/**

 * Custom SurveyJS question type for a "fill-in-the-gaps" text,

 * with an open-ended text input for each gap

 */

export const gapfillOpenWidget = {

    name: "gapfill-open",

    title: "Gap-Fill Text (Open)",

    /**

     * This function should return true when the widget and all needed resources

     * are loaded

     */

    widgetIsLoaded: function () {

        return true;

    },

    /**

     * This function should return true if the widget should be applied to the question */

    isFit: function (question) {

        return question.getType() === this.name;

    },

    init() {

        //Register a new type using the empty question as the base.

        Survey.Serializer.addClass(this.name, [], null, "empty");

    },

    /** Static HTML template rendered by SurveyJS */

    htmlTemplate: '<p id="gapfill-container"><template id="template-gap"><input type="text" class="sd-input inline-input"/></template></p>',

    /**

     * Function called after the HTML template is rendered. This time we actually have the `question` object

     * and the `el` element, to build the question according to the JSON

     */

    afterRender: function (question, el) {

        // The gap-fill text is made of segments, which are either plain pieces

        // of text (strings) or "gaps" (objects).

        // We append these to build the text, turning strings into <span>s and

        // gaps into <input> text fields

        let nbGaps = 0;

        const segmentElems = new DocumentFragment(); // a bit faster than mutating the DOM all the time

        const gapTemplate = document.getElementById("template-gap").content.firstChild;

        for (const segment of question.jsonObj.segments) {

            let segmentElem;

            if (typeof segment === 'string' || segment instanceof String) {

                segmentElem = document.createElement("span");

                segmentElem.innerText = segment;

            } else {

                // It's a gap

                // Create the <input> element

                segmentElem = gapTemplate.cloneNode(true);

                // Add the size attribute if present

                if (segment.hasOwnProperty("size")) {

                    segmentElem.setAttribute("size", segment.size);

                }

                segmentElem.setAttribute("data-index", nbGaps); // The node knows its index

                // Add callback to update the question's value when the input value changes

                segmentElem.addEventListener("change", (e) => {

                    // The input node knows its index, therefore is able to update the question value at the correct index

                    question.value[parseInt(e.target.getAttribute("data-index"))] = e.target.value;

                });

                // Add callback to update the DOM nodes when the question's value changes

                question.valueChangedCallback = () => {

                    const gaps = question.wrapperElement.querySelectorAll("#gapfill-container input");

                    if (question.value instanceof Array && question.value.length === gaps.length) {

                        for (const i in question.value) {

                            gaps[i].value = question.value[i];

                        }

                    } else {

                        // Unknown value -> reset all fields

                        for (const gap of gaps) {

                            gap.value = "";

                        }

                    }

                }

                nbGaps++;

            }

            // Add segment

            segmentElems.appendChild(segmentElem);

        }

        // Initialize question value array

        question.value = new Array(nbGaps);

        // Finally add everything to the DOM

        el.appendChild(segmentElems);

    },

};

 No newline at end of file

                    optionElem.innerText = opt;

                    optionElem.innerText = opt;

                    segmentElem.appendChild(optionElem);

                    segmentElem.appendChild(optionElem);

                }

                }

                // Add listener to update the question's value when the selector's value changes

                // Add callback to update the question's value when the selector's value changes

                segmentElem.addEventListener("change", (e) => {

                segmentElem.addEventListener("change", (e) => {

                    // The select node knows its index, therefore is able to update the question value at the correct index

                    // The select node knows its index, therefore is able to update the question value at the correct index

                    question.value[parseInt(e.target.getAttribute("data-index"))] = e.target.value;

                    question.value[parseInt(e.target.getAttribute("data-index"))] = e.target.value;

                });

                });

                // Add callback to update the DOM nodes when the question's value changes

                question.valueChangedCallback = () => {

                    const gaps = question.wrapperElement.querySelectorAll("#gapfill-container select");

                    if (question.value instanceof Array && question.value.length === gaps.length) {

                        for (const i in question.value) {

                            gaps[i].value = question.value[i];

                        }

                    } else {

                        // Unknown value -> reset all fields

                        for (const gap of gaps) {

                            gap.value = undefined;

                        }

                    }

                }

                nbGaps++;

                nbGaps++;

            }

            }

            // Add segment

            // Add segment

function showCorrectIndic(correct) {

/**

    let indic = document.getElementById("correct-indic");

 * Checks the answers for questions.

    if (correct === undefined) {

 */

        indic.innerText = "";

function checkAnswers() {

    } else if (correct) {

    const currentPage = survey.currentPage;

        indic.innerText = "Correct";

    let allCorrect = true;

        indic.classList.add("correct");

    currentPage.elements.forEach((element) => {

        if (element.getType() === 'html' && element.correctAnswers) {

            // Handle fill-in-the-blank questions

            for (const [blankId, correctAnswerArray] of Object.entries(element.correctAnswers)) {

                const inputElement = document.getElementById(blankId);

                if (!inputElement) {

                    console.error(`Element with ID ${blankId} not found.`);

                    allCorrect = false;

                    continue;

                }

                let userAnswer;

                if (inputElement.tagName === 'INPUT') {

                    userAnswer = inputElement.value.trim().toLowerCase();

                } else if (inputElement.tagName === 'SELECT') {

                    userAnswer = inputElement.options[inputElement.selectedIndex]?.value.trim().toLowerCase();

                }

                if (!userAnswer || !correctAnswerArray.some(correctAnswer => userAnswer === correctAnswer.toLowerCase())) {

                    allCorrect = false;

                }

            }

        } else if (element.getType() === 'radiogroup' && element.correctAnswer !== undefined) {

            // Handle radio group questions