CHECKBOX

Bonjour, j'aurais une question concernant une checkbox et je suis ultra débutant en codage...

J'aimerais intégrer une checkbox qui reste cochée lorsqu'un utilisateur la cochée, même si il quitte le site et qu'il revient 2 jours après et je n'y arrive pas.

Pour le contexte : c'est un espace membre dans lequel il y a des dizaines de vidéos par page, et j'aimerai simplement afficher une case à cocher "Vidéo lue" pour que les utilisateurs sachent quelles vidéos ils ont visionné. (sachant qu'elles ne sont pas forcément regardé dans l'ordre de la page, c'est pour quoi j'aimerai mettre cette fonction)

Voilà je sais pas si c'est faisable...

Merci beaucoup

Bonjour,
Bienvenue sur le forum.
Oui, c'est tout à fait possible.
Tu as deux solutions : localStorage en JavaScript (un espace de stockage pour le nom de domaine, qui se supprime seulement si tu le décides par une fonction ou si l'utilisateur fait "localStorage.clear()" dans la console) ou, les cookies, en JS ou en PHP (c'est mieux en PHP, avec httponly). Les cookies ce sont les trucs que tu vois sur toutes les pages avec un bandeau, selon la législation française.

Donc, quand il lit la vidéo, ça édite le localStorage ou les cookies. Quand il revient, ça lit le localStorage et les cookies pour avoir une liste de checkbox à cocher, puis ça les coche.

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.

Mask19 a écrit :
Il faut faire du code ?

En programmation oui, il faut toujours faire du code !!!

Mask19 a écrit :
Et du coup comment il faut s'y prendre ?

Et du coup, tu veux utiliser le JS ? Le PHP ?

Bin je crois pas que je puisse modifier le PHP car j'ai juste une zone marqué HTML/JS pour personnaliser l'espace membre

OK, donc il faut utiliser le JS, et donc le localStorage.
Tu peux déjà regarder ce lien : https://www.alsacreations.com/article/lire/1402-web-storage-localstorage-sessionstorage.html !

Sur ta page, comment les checkbox se cochent ? Quand ?

Je vais aller voir merci
Et bien il y'en a pas, je dois les créer de toute pièce avec du code justement, c'est pour ça que je suis un peu perdu ^^
J'ai des vidéos intégrées, c'est tout. Le reste page blanche

Bonjour,
Il faut que ça coche lorsque la vidéo est finie ? A été cliquée ?
Tu veux mettre jQuery ou rester sur du JS natif (Du code simple ou du code compliqué mais pur ?) ?

Je te conseille :
- au clic de la vidéo, s'il n'y a pas de localStorage pour cette vidéo, ajouter une clé et 1 (pour le clic de la vidéo, en jQuery, c'est $("video").click(function(){}); et pour voir s'il y a un clé, utilise has et pour ajouter une clé, localStorage.setItem("id de la vidéo",1) ).
- une fonction, au démarrage de la page, qui regarde pour chaque élément de localStorage quel est l'id indiqué.

Tu as vraiment besoin de checkbox ? Si la vidéo a été vue, ça doit faire quoi ? Mettre un style ? La cacher ? Ajouter un texte ? Juste cocker une checkbox (pas très pratique) ?

Tes vidéos, t'en a beaucoup ? Combien à peu près (5, 10, 20, 50, 100, 200, 500, 1000) ?

Si tu dois affecter un style pour ces vidéos (dont cacher fait partie), tu fais une boucle for, comme

for(var i=0;i<localStorage.length;i++){
document.getElementById(key(i)).style.display="none";
}

, qui caches toutes les vidéos dont l'id est dans localStorage.

En fait, tu es débutant comment ? Tu sais ce qu'est une variable, une fonction ? Tu sais les programmer en JS ? Tu sais programmer une condition if, des boucles,... ? Tu sais manier le CSS et HTML en JS ? Le PHP ?

Tu veux juste avoir ta fonction pour ta page ou savoir comment elle fonctionne ? Tu veux la programmer toi ?

Tu as besoin de plus de code ou tu comprends et tu arrives à finir ?

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.
Modifié par js_html (14 Feb 2021 - 21:16)

D'accord.
Oui, c'est normal qu'elle se décoche, si tu ne lui dit pas de se cocher...

Je vais te reposer quelques questions :
* Tes vidéos, ce sont des vidéos hébergées sur le site ou sur Youtube, Dailymotion, Vimeo... Elles ont la balise iframe ou video ?
* Tous ces modules sont sur la même page ou même domaine ?
Est-ce que tu sais si le site utilise jQuery ?
Tu veux juste une checkbox, pas un truc plus visible ?
Tu peux donner un lien de ta page ?
(Si tu donnes le lien de ta page, les questions avec * ne sont plus utiles)

Ok !

Mask19 a écrit :
Les vidéos sont hébergés chez YouTube (URL mais je peux faire en iframe si besoin) et DailyMotion (intégrées en iframe)

Donc, ce sont des liens ?

Mask19 a écrit :
Si j'ai bien compris "iframe" c'est quand on met un bout de code "embed" pour intégrer la vidéo directement ?

Oui, même si en français, on ne met pas de point d'interrogation après un si+question...

Mask19 a écrit :
Alors je suis ouvert à tout tant que les utilisateurs ont un moyen simple de savoir si ils ont fait la séance ou non. les checkbox me paraissaient pratiques mais si il y a mieux...

Je pense que c'est petit et pas très visible, mais bon. Je pense qu'un peu de CCS (le style de la page) serait mieux.

Peux-tu répondre à la question en gras ?

Ouais pas faux ^^

Alors au début je les mettais avec des liens oui donc il y'en a pas mal. Mais maintenant je les intègre en iframe avec DailyMotion

Je te met une screenshot pour que tu comprennes mieux (les vidéos sur la screen ont été ajoutée avec des URLS)

En tout cas, si ces sont des iframe, c'est le pire à gérer.
Je t'avais déjà fait le script dans le cas où c'était des <video>, si c'était des liens, il n'y avait plus qu'un truc à changer, mais là...

Zut !!!
Je n'ai pas cliqué sur "Envoyer" : désolé !

Voici le code : https://jsfiddle.net/exercices/qb9m1yvo/ :
Après, tu l'adaptes à tes vidéos.


Si tu as besoin d'aide, par exemple pour positionner les checkbox par rapport aux vidéos, tu peux refaire un sujet pour poser ta question : le forum est fait pour !

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.