STIC Discussion:STIC I - exercice 3 (Yoshi)

De EduTech Wiki
Aller à la navigation Aller à la recherche

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... ou while

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>&laquo; Valeur des notes de musique &laquo;</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)....

Ex.3—Besoin d'aide pour le traitement de SVG -- Pastora GGarcía (discussion) 15 novembre 2018 à 11:01 (CET)

Bonjour, messieurs Schneider, Fritz et Morand

Voici mon exercice 3.

Il y a un aspect que j'aimerai améliorer, il s'agit de l'utilisation des images SVG. Voici un fragment de mon rapport pour expliquer la situation:

«Je n'ai pas réussi à mettre en place une ressource SVG externe, sur laquelle j'aurais appliqué la propriété CCS "fill". Mon intention était d'apporter une redondance visuelle au feedback en format texte avec un changement de couleur de l'icône; je ne souhaitais pas une définition "inline" pour les icônes SVG à l'intérieur du code HTML, mais finalement, j'ai opté par cette dernière option, après avoir écarté deux autres que j'ai essayées: premièrement, un recours plus basique en rajoutant un "border", adapté à la forme ronde des icônes, dont le résultat ne me satisfaisais pas au niveau graphique; deuxièmement, création des versions en couleur des icônes, avec Inkscape, incluses dans des balises dans le fichier HTML, et adaptation du code de la page Javascript afin de pouvoir alterner entre les trois possibilités d'images (noir, vert et rouge), suivant le modèle proposé pour l'exercice 2 de STIC 1, sur la page Premiers pas avec JavaScript.»

Si vous considérez que l'option choisie n'est pas convenable, ou qu'elle sera pénalisante dans l'évaluation, je vous demande votre conseil/aide:

  • Devrais-je utiliser l'une des autres deux options?
  • Pourriez-vous m'indiquer comment réussir à réaliser ma première idée (ressource SVG externe, sur laquelle on applique la propriété CCS "fill")?

Si l'explication n'est pas claire, j'essaierai de l'exposer autrement.

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC_Discussion:STIC_I_-_exercice_3_(Yoshi)&oldid=103740 »