Bonsoir,

Ce que je veux

Voilà , je dois réaliser pour un projet un site. Il va s'agir d'un site qui va contenir plusieurs exercices du type questionnaire, des vignettes à remettre dans l'ordre grâce à du drag & drop ect... Seulement voilà je rencontre plusieurs soucis pour lesquels je n'arrive rélément pas à trouver une solution optimisé.

1- Toute les données, que ce soit texte, images, vidéos, et même réponse de chaque exercices doivent être externes de façon à pouvoir par la suite proposer une traduction de ces contenu par rapport à la langue choisie. J'ai décidé pour celà d'utiliser des fichier JSON pour chaque langue, conaissez vous une solution simple pour permettre de choisir le bon Url lors de la sélection de la langue ?

2- Voilà un deuxième problème avec lequel j'ai énormément de mal, il va s'agir de modifier entièrement le contenu du body, sachant qu'a chaque page le contenu est complétement différent, et que chaque page contient en gros un bouton "Valider" pour passer à la correction et ensuite un bouton "Suivant" pour passer à l'éxercice suivant. Étant débutant en JS, j'avais eu l'idée de gérer tous le HTML en créant les balises et le contenu grâce à JS. Mais on m'a fortement déconseillé cette solution, car il s'agit d'une prise de tête, et qu'il très difficile de pouvoir maintenir ce projet par la suite. J'aurais donc voulu savoir si vous auriez certains conseil ( utilisation de framwork spécifique, ect..) sur la possibilité de modifier complétement le contenu de la page en cliquant sur un bouton "Suivant". PS : Il faut s'avoir qu'il y a aussi un système de progression , dans le sens ou l'utilisateur peut voir à quel page il est, donc chaque fois que l'utilisateur avance, la barre de progression augmente.

Je vous remercie d'avance des réponses que vous pourrez m'apporter.

16 réponses


Lartak
Réponse acceptée

Ok.
Pour ce qui est de Framework Javascript, tu as par exemple VueJS, Grafikart a réalisé un e formation à ce sujet : Formation Javascript » VueJS 2.
Par contre, ça n'empèche pas de devoir avoir de bonnes connaissances en Javascript.

Bonsoir.
Pour le premier point, j'ai un peu de mal à te suivre, ta question concerne un le routing ou le fait de trouver un système fiable pour pouvoir gérer l'internationalisation des contenus de texte en collaboratif ?

Pour le second point, si tu veux faire changer une partie du contenu sans recharger la page, il n'y a pas d'autre moyen que de passer par du javascript, n'importe quelle librairie ou n'importe quel framework qui permet de le faire, utilises du javascript, donc si c'est bien le but de l'opération, je ne vois pas pourquoi cette personne t'a dit de ne pas utiliser javascript pour le faire, ou alors c'est qu'il veut se faire passer pour un connaisseur sur le sujet sans vraiment l'être.

Alors effectivement je recherche un système fiable pour gérer l'internationalisation des contenus.

Pour le second point, la personne ne m'a pas dt de ne pas utiliser JavaScript au contraire c'est nécessaire, mais il m'a seulement déconseillé la solution que j'ai trouvé pour modifier le contenu de chaque page. Pour être plus clair, je comptait laisser un squelette html presque vide ( seulement quelque div pour gérer la disposition du contenu) et gérer tout le reste des balises et le contenu avec JS, donc formulaires, affichage des vidéos, les vignettes à remettre dans l'ordre et même le bouton pour passer à la page suivant . Donc en conclusion utiliser du JS "pur" pour tout gérer à chaque fois, est une solution qui m'a fortement était déconseillé.

je vais peu etre me faire des enemis mais perso la je voie l'utilisation d'angularjs avec ui-router et l'internationalisation c'est facile avec angularjs et angular i18n la doc est ici

Très bien, donc VusJs serait une solution pour modifier tout le contenu dynamiquement ?

Tu as react qui permet de faire des choses assez sympas en termes d'UI sinon, les concepts de base sont similaires à vuejs mais c'est un peut plus complexe a l'utilisation.

Très bien je vais me renseigner sur VueJs et en ce qui concerne l'internationalisation des contenus une idée mise à part l'utilisation d'angularJs ?

ben si tu utilise vuejs, tu ne peut pas utiliser angularjs, c'est deux framework completement différent. angularjs permetra de faire toute les choses que tu as besoin rapidement et facilement mais si on l'utilise mal cela peut vite devenir le bordel, il faut comprendre le framework.

vuejs tu pourra faire pareil mais c'est un peut plus complexe a prendre en mains.

Donc concrétement, vous me conseillez d'utiliser AngularJS ? Cest à dire que je vais pouvoir facilement, modifier tout le contenu à chaque fois ? ( bien évidément il faudra que je me forme sur ce framework).

VueJs ou angularJs , lequel serait le plus simple ?

Ben tout dépend de la complexité et du type d'applications, mais ayant travaillé avec les trois (vue, angular et react) je trouve angular plus simple d'accès et plus rapidement productif sur ce genre de chose. Des formulaires dynamiques, des changements d'état rapides, etc. après cela n'engagent que moi.

Très bien, une autre petite question si celà ne vous dérange pas. Sachant que tout le contenu va être externe, que ce soit, text, url pour les image et url pour les vidéo, je comptais utiliser des fichier JSON mais je comptais aussi utiliser un fichier JSON dans lequel je mettrais toutes les réponse pour chaque formulaire. Ensuite lors de la validation de chaque formulaire je comptais aller chercher les valeur dans le JSON et comparer si les id des checkbox "checked" correspondent à ceux indiqués dans le JSON. Est-ce une bonne idée ou y'a t-il une manière plus simple de faire ?

Ahah certains me conseille VueJs et d'autre AngularJs, je me renseignerais pour savoir lequel prendre, le site web que je souhaite créer ne possède pas des fonctionnalités extrément poussé (barre de progression par rapport aux pages, des exercices drag and drop, des questionnaire avec, visualisation de vidéo et de contenu pédagogique ( fenetre pop up) . Ce qui va être compliqué pour moi : c'est juste de pouvoir gérer beaucoup de contenu, donc générer le bon contenu à chaque page et s'achant qu'il n'y aura pas de menu la difficulté ça va être aussi de pouvoir faire le lien entre tout ça. C'est la raison pour laquelle je me demandais si il y avait un framework qui me permettrait de faciliter la chose. Je suis censé travailler en front end donc je ne sais pas si l'utilisation de base de donnée rentre en compte. (même si l'utilisation de JSON pour les donnée ça reste de la gestion de donnée donc c'est la même ahah).

Très bien je vais voir ça ;)
Je terminerais avec une dernière question , je récupère mes données avec JSON en utilisant JSON comme ceci :

{
  "exercice_camera_1":[
    {
      "id": "video_1",
      "reponse":"q_1_r_1,q_1_r_3"

    },
    {
      "id": "video_2",
      "reponse":"q_2_r_1,q_2_r_4"
    },
    {
      "id": "video_3",
      "reponse":"q_3_r_1,q_3_r_2"
    }
  ],
  "exercice_camera_2":[
    {
      "id": "video_1",
      "reponse":"q_1_r_1,q_1_r_3"

    },
    {
      "id": "video_2",
      "reponse":"q_2_r_1,q_2_r_4"
    },
    {
      "id": "video_3",
      "reponse":"q_3_r_1,q_3_r_2"
    }
  ],
  "exercice_camera_3":[
    {
      "id": "video_1",
      "reponse":"q_1_r_1,q_1_r_3"

    },
    {
      "id": "video_2",
      "reponse":"q_2_r_1,q_2_r_4"
    },
    {
      "id": "video_3",
      "reponse":"q_3_r_1,q_3_r_2"
    }
  ]
}

Ensuite en JS j'ai créer un variable exerice qui va me permettre de récupérer le nom de l'exercice :

var exercice = $('div[class*="exercice"]').attr('class'); // va perettre de récupérer le libellee de l'exercice de la page actuelle donc soit 
// exercice_camera_1, exercice_camera_2 ou exercice_camera_3

Je voudrais ensuite utiliser cette variable lorsque je récupère les donnée du JSON mais je n'y arrive pas :/ , que dois je mettre à la place des étoiles dans le code suivant ? Quand j'écris manuellement les objets exercice_camera_1 ect.. cela fonctionne.



    $.getJSON('exercices.json',function (data) {

        console.log(data. ****** [0].reponse); // bon là pour l'instant je fait juste un affichage dans la console de la première reponse

    })

Justement en faite moi je veux viser une clé précise, celle qui sera afficher dans pas page HTML. Et celle dans le HTML je la récupère avec ceci :

var exercice = $('div[class*="exercice"]').attr('class');

Je veux pouvoir utiliser cette variable pour viser la clé que je veux dans le JSON. Je voudrais à la place de cles[0] mettre la variable. Donc j'aurais voulu savoir si c'était possible et quel serait la syntaxe ? Car j'ai essayé plein de truc mais je pense que la syntaxe n'est pas bonne du tout. :

console.log(data.exercice[0].reponse)

// ou 

console.log(data+'.'+exercice+''[0].reponse)

Ah niquel !! Merci :D