Skip to content

GitLab

Txuleton
Txuleton
Commit 7aef6c20 authored by Patrick Etcheverry's avatar Patrick Etcheverry
Browse files
Options

Travail sur le JS des séquences...

parent 1b0e633b
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 116 deletions
src/ScenarioBundle/Controller/PedagogicalScenarioController.php
View file @ 7aef6c20
......@@ -414,8 +414,10 @@ class PedagogicalScenarioController extends Controller
$sequencesPrecedementSpecifiees = null;
// On récupère la réponse séquence si on y a déjà répondu auparavant
if ($reponseAlaQuestionCourante != null && !empty($reponseAlaQuestionCourante->getSequencesArray()))
$sequencesPrecedementSpecifiees = $reponseAlaQuestionCourante->getSequencesArray();
// array filter pour se débarasser des éléments 'null'
$sequencesPrecedementSpecifiees = array_filter($reponseAlaQuestionCourante->getSequencesArray());
$createurFormulaires->add("answer_$i", 'collection', array(
'data' => $sequencesPrecedementSpecifiees,
'required' => false,
......@@ -427,7 +429,7 @@ class PedagogicalScenarioController extends Controller
$createurFormulaires->add("observation_$i", 'textarea', array(
'data' => $engineerObservation,
'read_only' => $readonly,
'required' => false,
'required' => false,
'attr' => array(
'placeholder' => $placeholderEngineerObservation)));
......@@ -487,7 +489,10 @@ class PedagogicalScenarioController extends Controller
/* Le lien SequenceQuestion 1 <-> * SequenceAnswer (la raciproque est faire de l'autre coté) */
$answer->setSequenceQuestion($Questions[$i]->getQuestion());
}
$answer->setSequencesArray($tabbReponses["answer_$i"]);
// Fonction "Array Filter" au cas où l'utilisateur aurait laissé des cases vides (null)
$answer->setSequencesArray(array_filter($tabbReponses["answer_$i"]));
}
// La remarque ingé et la validité sont propores à tous les types de questions
$answer->setPedagogicalEngineerObservation($tabbReponses["observation_$i"]);
......
src/ScenarioBundle/Resources/views/pedagogicalscenario/stagequestionsanswersedit.html.twig
View file @ 7aef6c20
......@@ -9,6 +9,7 @@
<link rel="stylesheet" href="{{ asset('css/questionAnswering.css')}}">
<link rel="stylesheet" href="{{ asset('css/dynamicSequenceTab.css')}}">
{% endblock %}
{# The displayed language of the questions is choosen with the current locale #}
{% set locale = app.request.locale %}
......@@ -31,7 +32,6 @@
<div style="max-width : 300px;" class="alert alert-success" role="alert"> Données correctement enregistrées</div>
{% endif %}
<form method="post" {{ form_enctype(formulaireReponses) }}>
{# Pour chacune des questions de l'étape #}
{% for questionOrder in questions %}
......@@ -47,10 +47,17 @@
{{ form_widget(formulaireReponses["answer_" ~ loop.index0]) }}
{% elseif questionOrder.question.getType == 'sequenceQuestion' %}
<div {{ form_enctype(formulaireReponses["answer_" ~ loop.index0]) }}>
<div id="sequenceQuestion">
<div {{form_enctype(formulaireReponses["answer_" ~ loop.index0])}}>
{{ form_widget(formulaireReponses["answer_" ~ loop.index0]) }}
</div>
</div>
<table id="tableauSequences">
</table>
<button type="button" onclick="ajouter()">Ajouter!</button>
{% elseif questionOrder.question.getType == 'sessionQuestion' %}
......@@ -72,87 +79,129 @@
{% else %}
<p><i>Aucune question associée à l'étape courante.</i></p>
{% endif %}
<script>
var nbItem = 0;
var modeleDataPrototype = $('div#sequenceQuestion').children().children().attr('data-prototype');
var nbLignes = 0;
var nbItem = 0; // Il s'agit du nombre de cases
creertableau();
recupereDonnees();
supprimerConneriesSymfony();
mettreBoutonsGestionLigne();
function creertableau()
{
// Creation du tbody
var tbody = document.createElement("tbody");
document.getElementById('tableauGenere').appendChild(tbody);
// Creation de la ligne d'entete
var entete = document.createElement("tr");
entete.setAttribute("id","entete");
//document.getElementById('tableauGenere').appendChild(entete);
tbody.appendChild(entete);
// Dans l'entete, on ajoute les 4 cases
var case1 = document.createElement("th");
case1.setAttribute("id","c1_l1");
case1.innerHTML = "Nom";
//document.getElementById('entete').appendChild(case1);
document.getElementById('entete').appendChild(case1);
var case2 = document.createElement("th");
case2.setAttribute("id","c2_l1");
case2.innerHTML = "Prenom";
document.getElementById('entete').appendChild(case2);
var case3 = document.createElement("th");
case3.setAttribute("id","c3_l1");
case3.innerHTML = "Age";
document.getElementById('entete').appendChild(case3);
var case4 = document.createElement("th");
case4.setAttribute("id","c4_l1");
case4.innerHTML = "Gestion";
document.getElementById('entete').appendChild(case4);
// Creation du tbody
var tbody = document.createElement("tbody");
document.getElementById('tableauSequences').appendChild(tbody);
// Creation de la ligne d'entete
var entete = document.createElement("tr");
entete.setAttribute("id","entete");
//document.getElementById('tableauSequences').appendChild(entete);
tbody.appendChild(entete);
// Dans l'entete, on ajoute les 4 cases
var case1 = document.createElement("th");
case1.setAttribute("id","c1_l1");
case1.innerHTML = "Title";
//document.getElementById('entete').appendChild(case1);
document.getElementById('entete').appendChild(case1);
var case2 = document.createElement("th");
case2.setAttribute("id","c2_l1");
case2.innerHTML = "Duration";
document.getElementById('entete').appendChild(case2);
var case3 = document.createElement("th");
case3.setAttribute("id","c3_l1");
case3.innerHTML = "Gestion";
document.getElementById('entete').appendChild(case3);
}
function recupereDonnees()
{
$.each($('div#sequenceQuestion').children().children().children(), function(index, value)
{
// Ajouter une ligne au tableau
if (nbItem % 2 == 0)
{
nouvelleLigne = document.getElementById("tableauSequences").insertRow();
nbLignes++;
}
// On retire le 'label' inutile
value = value.innerHTML.replace(/<label.*<\/label>/,"");
nouvelleLigne.insertCell().innerHTML = value;
alert(nbItem);
nbItem = nbItem + 1;
});
}
function supprimerConneriesSymfony()
{
$('div#sequenceQuestion').remove();
}
function mettreBoutonsGestionLigne()
{
var tailleTab = document.getElementById("tableauSequences").rows.length;
// Si il y a autre chose que l'entete (si il y a des données)
if (tailleTab > 1)
{
for (var i = 1; i < tailleTab; i++)
{
document.getElementById("tableauSequences").rows.item(i).insertCell();
document.getElementById("tableauSequences").rows.item(i).cells.item(2).innerHTML = '<span onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);">X</span>';
document.getElementById("tableauSequences").rows.item(i).cells.item(2).innerHTML += ' | <span onclick="monterLigne(this.parentNode.parentNode.rowIndex);">^</span>';
document.getElementById("tableauSequences").rows.item(i).cells.item(2).innerHTML += ' | <span onclick="descendreLigne(this.parentNode.parentNode.rowIndex);">v</span>';
}
}
}
function ajouter()
{
var tableau = document.getElementById("tableauGenere");
var tableau = document.getElementById("tableauSequences");
var nbColonnes = tableau.rows.item(0).cells.length;
var nbLignes = tableau.rows.length;
// On crée une nouvelle ligne
nouvelleLigne = tableau.insertRow();
nbLignes = nbLignes + 1;
// On crée toutes les cellules
for (colonneCourante = 0 ; colonneCourante < nbColonnes ; colonneCourante++)
{
nouvelleLigne.insertCell().innerHTML = "<input type='text' name='item" + nbItem++ + "'>";
nouvelleLigne.insertCell().innerHTML = modeleDataPrototype.replace(/__name__label__/g, ' ').replace(/__name__/g, nbItem);
nbItem++;
}
// Dans la dernière, on ajoute la croix de suppression
tableau.rows.item(tableau.rows.length - 1).cells.item(3).innerHTML = '<span onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);">X</span>';
tableau.rows.item(tableau.rows.length - 1).cells.item(2).innerHTML = '<span onclick="supprimerLigne(this.parentNode.parentNode.rowIndex);">X</span>';
// Si on n'est pas à la première ligne, on ajoute la possibilité de monter
tableau.rows.item(tableau.rows.length - 1).cells.item(3).innerHTML += ' | <span onclick="monterLigne(this.parentNode.parentNode.rowIndex);">^</span>';
tableau.rows.item(tableau.rows.length - 1).cells.item(2).innerHTML += ' | <span onclick="monterLigne(this.parentNode.parentNode.rowIndex);">^</span>';
// Si on n'est pas à la dernière ligne, on ajoute la possiblité de descendre
tableau.rows.item(tableau.rows.length - 1).cells.item(3).innerHTML += ' | <span onclick="descendreLigne(this.parentNode.parentNode.rowIndex);">v</span>';
tableau.rows.item(tableau.rows.length - 1).cells.item(2).innerHTML += ' | <span onclick="descendreLigne(this.parentNode.parentNode.rowIndex);">v</span>';
}
function supprimerLigne(num)
{
document.getElementById("tableauGenere").deleteRow(num);
document.getElementById("tableauSequences").deleteRow(num);
nbLignes--;
// Comme on vient de supprimer une ligne, on vient également de supprimer un certain nombre de cellules
// correspondant aux colonnes. Il faut le retrancher au nombre d'items
for (i=0 ; i < document.getElementById("tableauGenere").rows.item(0).cells.length ; i++)
{
nbItem--;
}
nbItem = nbItem - 2;
}
function monterLigne(num)
{
var tableau = document.getElementById("tableauGenere");
var tableau = document.getElementById("tableauSequences");
var nbLignes = tableau.rows.length;
if (num > 1 && num < nbLignes+1)
......@@ -170,7 +219,7 @@
function descendreLigne(num)
{
var tableau = document.getElementById("tableauGenere");
var tableau = document.getElementById("tableauSequences");
var nbLignes = tableau.rows.length;
if (num > 0 && num < nbLignes-1)
......@@ -187,71 +236,10 @@
}
</script>
{# On charge la bibliothèque jQuery #}
<script src="{{ asset('js/jquery.js')}}"></script>
{# Script permettant d'ajouter et supprimer dynamiquement des formulaires auteurs #}
<script type="text/javascript">
$(document).ready(function() {
// On récupère la balise <div>qui contient l'attribut « data-prototype » qui nous intéresse.
var $codeHtmlFormulaireAuteur = $('div#form_answer_4');
// On ajoute un lien pour ajouter une nouvel auteur
var $lienAjoutAuteur = $('<a href="#" id="add_auteur">Ajouter un auteur</a>');
$codeHtmlFormulaireAuteur.append($lienAjoutAuteur);
// On ajoute un nouveau champ auteur à chaque clic sur le lien d'ajout.
$lienAjoutAuteur.click(function(e) {
addAuteur($codeHtmlFormulaireAuteur);
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
<script src="{{ asset('js/insertionDynamiqueSequences.js')}}"></script>
// On définit un compteur unique pour nommer les champs Auteur qu'on va ajouter dynamiquement
var compteurAuteurs = $codeHtmlFormulaireAuteur.find(':input').length;
// On ajoute le code html d'un premier formulaire Auteur s'il n'en existe pas déjà un (cas d'ajout d'un nouveau livre).
if (compteurAuteurs == 0) {
addAuteur($codeHtmlFormulaireAuteur);
} else {
// Pour chaque formulaire auteur affiché, on ajoute un lien de suppression
$codeHtmlFormulaireAuteur.children('div').each(function() {
ajouterLienSuppression($(this));
});
}
{# Script permettant d'ajouter et supprimer dynamiquement des champs sequences dans une réponse de type sequence #}
<script type="text/javascript"> </script>
// La fonction qui ajoute un formulaire Auteur
function addAuteur($codeHtmlFormulaireAuteur) {
// Dans le contenu de l'attribut « data-prototype », on remplace :
// - le texte "__name__label__" qu'il contient par notre label (ici un label vide pour ne pas surcharger le formulaire)
// - le texte "__name__" qu'il contient par le numéro du champ
var $codeHtmlNouvelAuteur = $($codeHtmlFormulaireAuteur.attr('data-prototype').replace(/__name__label__/g, ' ')
.replace(/__name__/g, compteurAuteurs));
// On ajoute au code html un lien pour pouvoir supprimer l'auteur
ajouterLienSuppression($codeHtmlNouvelAuteur);
// On ajoute le code html qu'on vient de modifier à la fin de la balise <div>
$codeHtmlFormulaireAuteur.append($codeHtmlNouvelAuteur);
// On incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
compteurAuteurs++;
}
// La fonction qui ajoute un lien de suppression d'un auteur
function ajouterLienSuppression($codeHtmlNouvelAuteur) {
// Création du lien
$lienSuppression = $('<a href="#">Supprimer cet auteur</a>');
// Ajout du lien
$codeHtmlNouvelAuteur.append($lienSuppression);
// Ajout du listener sur le clic du lien
$lienSuppression.click(function(e) {
$codeHtmlNouvelAuteur.remove();
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
}
});
</script>
{% endblock %}
web/js/insertionDynamiqueSequences.js 0 → 100644
View file @ 7aef6c20
$(document).ready(function() {
// On récupère la balise <div>qui contient l'attribut « data-prototype » qui nous intéresse.
var $codeHtmlFormulaireSequence = $('div#sequenceQuestion').children().children();
// On ajoute un lien pour ajouter une nouvelle sequence
//var $lienAjoutSequence = $('<a href="#" id="add_sequence">Ajouter une séquence</a>');
//$codeHtmlFormulaireSequence.append($lienAjoutSequence);
// On ajoute un nouveau champ auteur à chaque clic sur le lien d'ajout.
$lienAjoutSequence.click(function(e) {
addSequence($codeHtmlFormulaireSequence);
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
// On définit un compteur unique pour nommer les champs Auteur qu'on va ajouter dynamiquement
var compteurSequences = $codeHtmlFormulaireSequence.find(':input').length;
// On ajoute le code html d'un premier formulaire Sequence s'il n'en existe pas déjà un
if (compteurSequences == 0) {
addSequence($codeHtmlFormulaireSequence);
} else {
// Pour chaque formulaire sequence affiché, on ajoute un lien de suppression
$codeHtmlFormulaireSequence.children('div').each(function() {
ajouterLienSuppression($(this));
});
}
// La fonction qui ajoute un formulaire Auteur
/*function addSequence($codeHtmlFormulaireSequence) {
// Dans le contenu de l'attribut « data-prototype », on remplace :
// - le texte "__name__label__" qu'il contient par notre label (ici un label vide pour ne pas surcharger le formulaire)
// - le texte "__name__" qu'il contient par le numéro du champ
var $codeHtmlNouvelleSequence = $($codeHtmlFormulaireSequence.attr('data-prototype').replace(/__name__label__/g, ' ')
.replace(/__name__/g, compteurSequences));
// On ajoute au code html un lien pour pouvoir supprimer l'auteur
ajouterLienSuppression($codeHtmlNouvelleSequence);
// On ajoute le code html qu'on vient de modifier à la fin de la balise <div>
$codeHtmlFormulaireSequence.append($codeHtmlNouvelleSequence);
// On incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
compteurSequences++;
}*/
// La fonction qui ajoute un lien de suppression d'un auteur
/*function ajouterLienSuppression($codeHtmlNouvelleSequence) {
// Création du lien
$lienSuppression = $('<a href="#">Supprimer cette séquence</a>');
// Ajout du lien
$codeHtmlNouvelleSequence.append($lienSuppression);
// Ajout du listener sur le clic du lien
$lienSuppression.click(function(e) {
$codeHtmlNouvelleSequence.remove();
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
}*/
});
web/js/recupererDonnees.js 0 → 100644
View file @ 7aef6c20
function recupereDonnees(mesCouilles)
{
alert(mesCouilles);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment