STIC Discussion:STIC I - exercice 3 (Yoshi)
Feedback -- Mariana Mozdzer (discussion) 6 novembre 2018 à 10:05 (CET)
Bonjour, Je voudrais avoir, si possible, un feedback sur mon exercice 3. Voici le lien: http://tecfaetu.unige.ch/etu-maltt/yoshi/mozdzer7/stic-1/ex3/verbs/ Est-ce que ça suffit ou est-ce que c'est trop simple? - 1 changement entre 2 images svg en utilisant onMouseOver - 1 manipulation du DOM: Changement de couleur de la page en utilisant en button (j'aurais voulu ajouter un bouton pour revenir à la couleur initialle, mais sans succès après plusiers essaies de code). Vos commentaires seront appreciés! Merci d'avance. Cordialement, Mariana
Re: Feedback -- Mattia A. Fritz (discussion) 6 novembre 2018 à 10:47 (CET)
Bonjour Mariana,
votre exercice respecte la plupart des contraintes, mais pas toutes. Il vous manque :
- Votre code doit contenir au moins l'une de ces caractéristiques (à choix) :
- Une structure de contrôle de type
if... else... - La génération d'un élément aléatoire
- L'utilisation d'une boucle
for...ouwhile
- Une structure de contrôle de type
De plus, les objectifs des exercices sont de consolider les aspects pédagogiques liés à l'interactivité et à la computation. À ce propos, votre code ne ressemble pas du tout à ce qu'on vous montre ou conseille de faire (identification des éléments, ajoute d'un gestionnaire d'événement, etc.). Si vous voulez retenir quelque chose de plus du cours, je vous conseille d'essayer vous-même de trouver des solutions algorithmiques plutôt que de faire un assemblage de snippets que vous trouvez sur le web.
Cordialement, Mattia
-- Emilie Lettry (discussion) 13 novembre 2018 à 14:51 (CET)
Bonjour,
J'aimerai pour ma contribution EdutechWiki créer une petite page sur les règles de ponctuation en informatique. Voir cette page. Est-ce qu'une telle page aurait sa place et une utilité sur EdutechWiki ?
Merci de votre réponse,
Cordialement,
Re: -- Daniel K. Schneider (discussion) 13 novembre 2018 à 17:33 (CET)
Bonjour Emilie
oui absolument. Par contre, le lien n'a pas grand chose à voir avec "l'informatique" (pas clair pourquoi l'auteur a mis ce titre). Il faudrait discuter donc aussi la pertinence de ces règles pour l'écriture de textes en ligne. Il est très difficile d'entrer des petites espaces et du coup beaucoup de gens adoptent plutôt un style "anglais". Donc aussi discuter comment insérer des petits espaces ... Regardez aussi comment wikipédia règles ces choses. https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Conventions_typographiques
Perdue dans javascript -- Katrine Briguet (discussion) 15 novembre 2018 à 18:41 (CET)
Bonjour, Je tourne en rond avec cet exercice depuis plusieurs jours. Je ne trouve pas de solutions à mon problème, et malheureusement il m'a été impossible de me déplacer pour la journées de support pour des raisons professionnelles.
Vous pouvez trouver mon code en suivant ce lien: http://tecfaetu.unige.ch/etu-maltt/yoshi/briguek8/stic-1/ex3/
Voici mes deux questions:
- lignes 23-44: pourquoi ma fonction pour afficher aléatoirement les mots « noire », « croche » et « doublecroche » dans mon bouton « afficher une nouvelle valeur » ne fonctionne pas? Il reconnaît l’action de cliquer, mais pas celle de réaliser l’action demandée, à savoir d’afficher aléatoirement ces mots).
- lignes 47-62: pourquoi la fonction suivante ne fonctionne-t-elle pas? J’aimerais que si le main-btn affiche « noire », le clic sur l’image de la noire est juste, mais le clic sur la croche ou la double croche est fausse….
boutonnoire.addEventListener('click', function () {
var valeurnote = "noire";
if (subject == "noire") {
console.log("C'est juste!");
}
if (subject != "noire") {
console.log("Ce n'est pas la bonne réponse...");
Merci d'avance pour votre réponse, Katrine
Re: Perdue dans javascript -- Daniel K. Schneider (discussion) 15 novembre 2018 à 19:15 (CET)
Je réponds déjà à la première question. Votre logique est bonne, mais vous oubliez d'afficher les résultats. Il existe plusieurs méthodes, mais dans tous les cas il faut indiquer à HTML quel contenu de quel élément HTML il faut changer. Puisque je ne sais pas ou vous voulez afficher, je propose de changer le texte du bouton lui-même. Sinon, il avait aussi un problème dans la fonction getRandomWord. Le randomIndex est un nombre qui varie entre 0 et 2. Il sert ensuite à extirper un mot au hasard du tableau (array) qui s'appelle "valeurnote".
var valeurnote = [
"noire",
"croche",
"doublecroche"
];
//Fonction pour récupérer un mot aléatoire
function getRandomWord() {
// modif DKS
var randomIndex = Math.floor(Math.random() * valeurnote.length);
return valeurnote[randomIndex];
}
//Ajouter le gestionnaire d'événement au bouton
document.querySelector("#randomWordBtn").addEventListener("click", function() {
var randomwordbutton = getRandomWord();
// linge ajouté par DKS.
document.querySelector("#randomWordBtn").innerHTML = "Choix = " + randomwordbutton + " (Clic pour changer)";
});
Re: Perdue dans javascript -- Daniel K. Schneider (discussion) 15 novembre 2018 à 20:44 (CET)
Voici la suite. Il y a plusieurs points qu'il faudrait discuter.
- Vous utilisez des variables qui n'ont jamais été définies. Donc vous faites des comparaisons entre un mot et une variable qui n'existe pas. Autrement dit, vous n'avez pas réussi à faire le lien entre ce qui a été choisi et le choix fait par l'utilisateur.
- Votre code est un brin compliqué (normal pour une débutante).
Mattia est en vacances et moi je n'ai pas le temps ce soir. Donc je vous donne juste la solution. Exercice pour vous: Comprendre la logique du code et finir le feedback.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Valeur des notes de musique</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<header>
<h1>« Valeur des notes de musique «</h1>
</header>
<main>
<p>Cliquez sur la note qui correspond à la valeur.</p>
<div class="affichernewvaleur">
<button id="randomWordBtn" class="main-btn">Afficher une valeur</button>
</div>
<div class="shownoire">
<button id="affichernoire" class="noire"> <img src="assets/images/noire.svg" alt="noire" title="noire"></button>
</div>
<div class="showcroche">
<button id="affichercroche" class="croche"> <img src="assets/images/croche.svg" alt="croche" title="croche"></button>
<div class="showdoublecroche">
<button id="afficherdoublecroche" class="doublecroche"> <img src="assets/images/doublecroche.svg" alt="doublecroche" title="doublecroche"></button>
</div>
</main>
<footer>
<p>Créé par Katrine Briguet, le 18 novembre 2018</p>
</footer>
<script>
// Variable qui définit la note voulu, on définit une valeur par défaut.
var noteVoulue = "noire";
var valeurnote = [
"noire",
"croche",
"doublecroche"
];
//Fonction pour récupérer un mot aléatoire
function getRandomWord() {
var randomIndex = Math.floor(Math.random() * valeurnote.length);
return valeurnote[randomIndex];
}
// Fonction qui tire un nouveau mot (note)
document.querySelector("#randomWordBtn").addEventListener("click", function() {
// on change la note voulue dans la variable GLOBALE définie au début
noteVoulue = getRandomWord ();
document.querySelector("#randomWordBtn").innerHTML = "Choix = " + noteVoulue + " (Clic pour changer)";
});
// Fonction qui teste si un mot correspond à la note voulue
function testerSolution (couleur) {
if (couleur == noteVoulue) {
console.log("C'est juste!");
}
else {
console.log("Ce n'est pas la bonne réponse...");
}
}
document.getElementById('affichernoire').addEventListener('click', function () {testerSolution ("noire")});
document.getElementById('affichercroche').addEventListener('click', function () {testerSolution ("croche")});
document.getElementById('afficherdoublecroche').addEventListener('click', function () {testerSolution ("doublecroche")});
</script>
</body>
</html>
Désolé, je peux vous expliquer mieux plus tard (ou Mattia)....