Skip to content
Snippets Groups Projects
Commit b8ebdb95 authored by Anthony's avatar Anthony
Browse files

Merge branch '17-UI-for-reunion-du-16-01' into 'main'

Resolve "Démo/Réunion du 16/01 avec Laurence et Sheridan"

Closes #15

See merge request !4
parents 853e1ac9 46b0b5b5
No related branches found
No related tags found
1 merge request!4Resolve "Démo/Réunion du 16/01 avec Laurence et Sheridan"
Pipeline #2043 passed
Showing
with 6358 additions and 48 deletions
body {
--accent-quiz: #2aa198;
// Defined but not used for now
// 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: lightgreen;
--feedback-error-color: #ef5d5d;
--feedback-sucess-color: rgba(167, 243, 167, 0.8);
--feedback-error-color: #f8a5a5;
// To edit SurveyJs colors see TODO create custom theme for SurveyJs
}
// ***********************************
// Gloabl
// Global
// ***********************************
#sv-nav-complete {
display: none;
.btn-play {
cursor: pointer;
background-color: var(--macao-primary-color);
border-radius: 5px;
border: none;
padding: 5px 10px;
}
p#gapfill-container {
......@@ -39,7 +43,6 @@ select.sd-dropdown.inline-dropdown, input.sd-input.inline-input {
}
#correct-indic {
//border: 2px solid var(--accent-quiz);
border-radius: 8px;
padding: 16px;
......@@ -71,3 +74,70 @@ select.sd-dropdown.inline-dropdown, input.sd-input.inline-input {
margin-top: 0;
}
}
// ***********************************
// 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.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;
}
}
// ***********************************
// Comment on page
// ***********************************
.comment-trigger {
cursor: pointer;
color: var(--macao-primary-color);
text-decoration: underline;
}
.commentaireInfo {
padding: 10px;
border-radius: 10px;
background-color: var(--secondary-background-color);
border: 1px solid var(--macao-primary-color);
color: black;
max-width: 500px;
}
em:not(:has(strong)) {
background-color: lightgray;
padding: 3px;
padding-right: 4px;
border-radius: 5px;
}
......@@ -2,5 +2,34 @@ 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>');
$('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').on('click', function() {
let spanid = $(this).attr('spanid');
$("[commentaireid=" + spanid + "]").toggle();
});
// 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();
}
});
......@@ -47,6 +47,16 @@ $(function () {
// Load survey model from JSON
const survey = new Survey.Model(jsonStatic);
const questions = survey.getAllQuestions();
if(questions.length === 1) {
console.log("Survey has only one question");
console.log(questions[0]);
const regex = /pg\d\d\d/g;
if(questions[0].title.match(regex)) {
questions[0].titleLocation = "hidden";
}
}
// Instantiate `markdown-it`
const converter = markdownit({
html: true // Support HTML tags in the source (unsafe, see documentation)
......@@ -96,8 +106,15 @@ $(function () {
innerCss: "sd-btn nav-input"
});
// Ugly tricks to avoid to create a new theme
const customTheme = SurveyTheme.DefaultLightPanelless;
const primColor = getComputedStyle(document.documentElement,null).getPropertyValue('--macao-primary-color');
customTheme.cssVariables["--sjs-primary-backcolor"] = primColor;
customTheme.cssVariables["--sjs-primary-backcolor-dark"] = primColor;
// Apply theme
survey.applyTheme(SurveyTheme.DefaultLightPanelless);
console.log("Survey theme applied", SurveyTheme.DefaultLightPanelless);
// Inflate the survey in the page
$("#surveyContainer").Survey({ model: survey });
......
......@@ -8,9 +8,7 @@ Ecoutez et complétez les deux énoncés suivants en vous servant de
vos connaissances grammaticales.
<div class="commentaireInfoGroup">
<div class="commentaireInfo">
</div>
<div class="commentaireInfoGroup" hidden="True">
</div>
{{< quiz >}}
{
"elements": [
{
"name": "pg1888",
"customFormat": "tat",
{pg1888_seg0,
{pg1888_seg0__,
},
},
}
]
......
......@@ -12,9 +12,7 @@ Ecoutez l'énoncé :
Cet énoncé renvoie-t-il à une situation réelle ?
<div class="commentaireInfoGroup">
<div class="commentaireInfo">
</div>
<div class="commentaireInfoGroup" hidden="True">
</div>
{{< quiz >}}
......@@ -11,9 +11,7 @@ Ecoutez :
Sélectionnez ce que vous avez entendu.
<div class="commentaireInfoGroup">
<div class="commentaireInfo">
</div>
<div class="commentaireInfoGroup" hidden="True">
</div>
{{< quiz >}}
{
"elements": [
{
"name": "pg2429",
"customFormat": "tat",
{pg2429_seg0,
{pg2429_seg0__,
pg2429_seg1__rep247,
pg2429_seg1__rep471,
pg2429_seg2__,
},
pg2429_seg1,
{pg2429_seg0__,
pg2429_seg1__rep247,
pg2429_seg1__rep471,
pg2429_seg2__,
},
pg2429_seg1,
{pg2429_seg0__,
pg2429_seg1__rep247,
pg2429_seg1__rep471,
pg2429_seg2__,
},
pg2429_seg2,
{pg2429_seg0__,
pg2429_seg1__rep247,
pg2429_seg1__rep471,
pg2429_seg2__,
},
},
}
]
......
......@@ -13,9 +13,7 @@ l'énoncé entendu :
| <div><audio id="ecran17_04.mp3" ><source src="/macao-hugo/media/ecran17/ecran17_04.mp3" type="audio/mpeg"></audio><button onclick="document.getElementById('ecran17_04.mp3').play()">Play</button></div><div><audio id="ecran17_01.mp3" ><source src="/macao-hugo/media/ecran17/ecran17_01.mp3" type="audio/mpeg"></audio><button onclick="document.getElementById('ecran17_01.mp3').play()">Play</button></div> | |
<div class="commentaireInfoGroup">
<div class="commentaireInfo">
</div>
<div class="commentaireInfoGroup" hidden="True">
</div>
{{< quiz >}}
......@@ -14,9 +14,7 @@ Ecoutez les deux énoncés suivants.
Que diriez-vous des blocs mis en valeur ?
<div class="commentaireInfoGroup">
<div class="commentaireInfo">
</div>
<div class="commentaireInfoGroup" hidden="True">
</div>
{{< quiz >}}
......@@ -14,9 +14,7 @@ Réécoutez l'énoncé :
| --- | --- | --- | --- |
<div class="commentaireInfoGroup">
<div class="commentaireInfo">
</div>
<div class="commentaireInfoGroup" hidden="True">
</div>
{{< quiz >}}
......@@ -10,9 +10,7 @@ Ecoutez à nouveau l'énoncé et complétez.
| --- | --- |
<div class="commentaireInfoGroup">
<div class="commentaireInfo">
</div>
<div class="commentaireInfoGroup" hidden="True">
</div>
{{< quiz >}}
......@@ -12,9 +12,7 @@ Ecoutez l'énoncé :
Cet énoncé comporte-t-il une hypothèse ?
<div class="commentaireInfoGroup">
<div class="commentaireInfo">
</div>
<div class="commentaireInfoGroup" hidden="True">
</div>
{{< quiz >}}
......@@ -14,9 +14,7 @@ Ecoutez les deux énoncés suivants.
Que diriez-vous des blocs mis en valeur ?
<div class="commentaireInfoGroup">
<div class="commentaireInfo">
</div>
<div class="commentaireInfoGroup" hidden="True">
</div>
{{< quiz >}}
......@@ -11,9 +11,7 @@ Ecoutez l'énoncé :
Quels sont les indices grammaticaux qui renvoient à une situation hypothétique ?
<div class="commentaireInfoGroup">
<div class="commentaireInfo">
</div>
<div class="commentaireInfoGroup" hidden="True">
</div>
{{< quiz >}}
......@@ -10,9 +10,7 @@ Ecoutez et complétez :
| --- | --- |
<div class="commentaireInfoGroup">
<div class="commentaireInfo">
</div>
<div class="commentaireInfoGroup" hidden="True">
</div>
{{< quiz >}}
......@@ -10,9 +10,7 @@ Ecoutez et complétez :
| --- | --- |
<div class="commentaireInfoGroup">
<div class="commentaireInfo">
</div>
<div class="commentaireInfoGroup" hidden="True">
</div>
{{< quiz >}}
{
"elements": [
{
"name": "pg3600",
"customFormat": "tat",
{pg3600_seg0,
{pg3600_seg0__,
pg3600_seg1__rep101,
pg3600_seg1__rep101,
pg3600_seg1__rep117,
pg3600_seg1__rep117,
pg3600_seg2__,
},
pg3600_seg1,
{pg3600_seg0__,
pg3600_seg1__rep101,
pg3600_seg1__rep101,
pg3600_seg1__rep117,
pg3600_seg1__rep117,
pg3600_seg2__,
},
pg3600_seg1,
{pg3600_seg0__,
pg3600_seg1__rep101,
pg3600_seg1__rep101,
pg3600_seg1__rep117,
pg3600_seg1__rep117,
pg3600_seg2__,
},
pg3600_seg1,
{pg3600_seg0__,
pg3600_seg1__rep101,
pg3600_seg1__rep101,
pg3600_seg1__rep117,
pg3600_seg1__rep117,
pg3600_seg2__,
},
pg3600_seg1,
{pg3600_seg0__,
pg3600_seg1__rep101,
pg3600_seg1__rep101,
pg3600_seg1__rep117,
pg3600_seg1__rep117,
pg3600_seg2__,
},
pg3600_seg2,
{pg3600_seg0__,
pg3600_seg1__rep101,
pg3600_seg1__rep101,
pg3600_seg1__rep117,
pg3600_seg1__rep117,
pg3600_seg2__,
},
},
}
]
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment