« STIC Discussion:STIC I - exercice 5 (Wall-e) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
 
(5 versions intermédiaires par 3 utilisateurs non affichées)
Ligne 30 : Ligne 30 :
Kristina
Kristina


== Ex 5, drag and drop... erreur dans le code -- [[Utilisateur:SirnaC|SirnaC]] ([[Discussion utilisateur:SirnaC|discussion]]) 4 janvier 2017 à 18:22 (CET) ==
== Comment afficher une alerte textuelle pour un "mauvais" glisser-déposer ? -- [[Utilisateur:Andréa|Andréa]] ([[Discussion utilisateur:Andréa|discussion]]) 29 janvier 2017 à 00:36 (CET) ==


Bonjour Mattia,
Bonsoir à tous,
 
Dans mon exercice 5, qui par miracle est déjà prêt (youhouuu !), les divers éléments doivent être glissés-déposés dans 2 containers différents. Mon travail se trouve dans l'emplacement suivant : http://tecfaetu.unige.ch/etu-maltt/wall-e/fariash7/stic-1/ex5/mallt-devoirs-ex5.html
 
J'aimerais insérer une alerte textuelle en cas d'erreur de glissade, du style "Mauvais choix".
 
J'ai trouvé sur Openclassrooms le code ci-dessous (JQuery) qui pourrait faire l'affaire :
 
'''$('p').on( 'click', function () {
    alert("Mauvaise option")
});'''
 
et j'ai essayé de l'incorporer dans le groupe de codes suivant de mon travail, sans succès :
 
<script>
        $(".item").draggable({
            revert: "invalid",
            cursor: "move",
        });
        $(".cours-container").droppable({
            accept: ".cours"
        });
        $(".loisir-container").droppable({
            accept: ".loisir"
        });
    </script>
 
Puis ensuite j'ai voulu créer une instruction avec la fonction '''if''' en Javascript et ai essayé d'écrire moi-même le code. Trop difficile pour moi. :o(
 
Est-ce que vous pourriez me donner deux ou trois indices sur comment trouver la solution à ce problème ?
Super merci !
andréa
 
===Re: Comment afficher une alerte textuelle pour un "mauvais" glisser-déposer ? -- [[Utilisateur:Mattia A. Fritz|Mattia A. Fritz]] ([[Discussion utilisateur:Mattia A. Fritz|discussion]]) 29 janvier 2017 à 17:15 (CET)===
 
Bonjour,
 
pour ce type de comportement il faut élaborer davantage votre logique de l'application en utilisant du codage lors de l'événement drop. Vous pouvez vous référez à la séction [[JQuery_UI#Drag.26drop_avec_code_suppl.C3.A9mentaire|Drag&Drop avec code supplémentaire]], et notamment l'exemple http://tecfaetu.unige.ch/perso/maltt/fritz0/guides/jquery-ui/ex8_droppable_custom_code.html, pour plus de détails.
 
Je vous déconseille en tout cas d'utiliser des <code>alert()</code> car elles bloques totalement l'accès à la page.
 
Mattia
 
====Re: Re: Comment afficher une alerte textuelle pour un "mauvais" glisser-déposer ? -- [[Utilisateur:Andréa|Andréa]] ([[Discussion utilisateur:Andréa|discussion]]) 29 janvier 2017 à 18:46 (CET)====
 
Merci Mattia ! Je vais voir cela.


j'espère que vous avez passé de bonnes vacances!
== Une nouvelle page Edutechwiki -- [[Utilisateur:Andréa|Andréa]] ([[Discussion utilisateur:Andréa|discussion]]) 30 janvier 2017 à 13:08 (CET) ==


Je suis en train de faire l'exercice 5, mais le drag and drop ne marche pas... est-ce que vous pourriez m'aider à comprendre quel est l'erreur à niveau de code?
Bonjour Mattia,


'''Ici le code dans le fichier .html:'''
Je constate que mes camarades du Maltt utilisent google docs d'une manière très rudimentaire, comme on pourrait utiliser Notepad : sans aucune mise en forme ou mise en page particulière. Je trouve que c'est dommage, car, malgré la simplification de ce programme, Google Docs est un traitement de texte puissant qui peut produire des textes d'une grande qualité visuelle.


<!doctype html>
Dans le cadre de ma participation dans Edutechwiki pour les cours de Stic, je souhaiterais créer une page du style : '''Utiliser Google Docs avec une mise en page de qualité'''. Est-ce que ce thème serait accepté par le "comité de direction" ? Si oui, est-ce que vous pourriez démarrer une page pour moi ? Il me semble que nous devons créer une page avec une catégorie spécifique, etc.
<html>


<head>
D'autre part, je suis consciente de l'existence dans Edutech wiki de la page en construction "Google Docs en tant qu'outil d'awareness de groupe". Le contenu que je propose n'est pas concurrent à cette page, mais complémentaire.
    <meta charset="UTF-8">
    <title>Presentarse en español</title>
    <link href="ex5.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="jq/jquery-ui.min.css">
</head>


<body>
Merci pour votre aide.
    <header>
Cordialement,
        <p>Saludar y presentarse en español</p>
andréa
    </header>
    <h1>Est-ce que vous vous rappelez comment ça ce fait?</h1>
    <p>Ce petit exercice vous permettra d'apprendre à saluer en español. Les images vous aideront à faire le bon choix... Bien! Alors lisez les instructions!</p>
    <p><strong>Associez les phrases avec l'image correspondante</strong></p>
    <p>
        <div class="item saludarse">Hola</div>
        <div class="item presentarse">Encantado</div>
        <div class="item despedirse">Adiós</div>
        <div class="item noche">Buenas noches</div>
        <div class="item dia">Buenos días</div>
        <div class="item presentarse">Mucho gusto</div>
        <div class="item dia">Buenas tardes</div>
        <div class="item despedirse">Hasta luego</div>
        <div class="item despedirse">Hasta la próxima</div>
    </p>
    <div class="clear"></div>
    <div class="container dia">
        <h2>De día</h2></div>
    <div class="container noche">
        <h2>De noche</h2></div>
    <div class="container presentarse">
        <h2>Presentarse</h2></div>
    <div class="container despedirse">
        <h2>Despedirse</h2></div>
    <div class="container saludarse">
        <h2>Saludarse</h2></div>
    <div class="clear"></div>
    <hr>
    <script src="external/jquery/jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script src="ex5.js"></script>


</body>
===Re: Une nouvelle page Edutechwiki -- [[Utilisateur:Mattia A. Fritz|Mattia A. Fritz]] ([[Discussion utilisateur:Mattia A. Fritz|discussion]]) 30 janvier 2017 à 14:49 (CET)===
</html>


'''Ici le code du fichier .css:'''
Bonjour Andréa,


header {
vous pouvez tout à fait faire votre contribution wiki sur ce type de sujet.  
            margin-top: -20px;
            width: 100%;
            height: auto;
            list-style-type: none;
            text-align: center;
            font-family: sans-serif;
            font-size: 50px;
            background-color: green;
        }
       
        body {
            font-family: sans-serif;
            background-color: darkslategrey;
        }
       
        .item {
            float: left;
            width: 150px;
            border: 1px solid #999;
            background-color: #F9F6D0;
            padding: 10px 15px;
            font-weight: bold;
            font-size: 16px;
            margin-right: 20px;
            margin-bottom: 50px;
        }
       
        audio {
            width: 150px;
        }
       
        .clear {
            clear: both;
            overflow: hidden;
        }
       
        .container {
            float: left;
            width: 175px;
            height: 125px;
            border: 1px solid #999;
            background-color: #FFFFFF;
            padding: 10px 15px;
            margin-right: 20px;
            margin-left: 20px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
       
        p {
            text-align: justify;
        }


'''Et, enfin, le code du fichier .js:'''
Vous pouvez créer n'importe quelle page vous-même (depuis les [[Guidelines:Edition de base]]) :


$(".item").draggable({
* Créer une page revient simplement à créer un nouveau lien (depuis une autre page comme votre "home page", cliquer dessus, éditer et sauver.
    revert: "invalid",
* Alternativement, utilisez rechercher (en haut à droite) pour chercher un nom de page. Si elle n'existe pas le Wiki propose de la créer.
    cursor: "move"
});
$(".saludarse-container").droppable({
    accept: ".saludarse"
});
$(".dia-container").droppable({
    accept: ".dia"
});
$(".noche-container").droppable({
    accept: ".noche"
});
$(".presentarse-container").droppable({
    accept: ".presentarse"
});
$(".despedirse-container").droppable({
    accept: ".despedirse"
});


Vous pouvez ensuite ajouter une ou plusieurs catégories dans lesquelles vous pensez que votre page peut/doit apparaître en ajoutant à la fin du code la notation suivante :
<nowiki>[[Category: Nom-de-la-catégorie-1]] [[Category: Nom-de-la-catégorie-2]] ...</nowiki>


Merci d'avance pour votre réponse et bonne reprise à vous aussi
Bien cordialement,
Chiara
Mattia

Dernière version du 30 janvier 2017 à 15:49

Clarification de consigne -- Kristina (discussion) 10 décembre 2016 à 22:33 (CET)

Bonjour,

Pouvez-vous précisez ce que c'est "artwork" (consigne 3.1.1) --> "Vous pouvez utiliser du "artwork" externe (mais pas plus que 66 %)"

Merci beaucoup.

Kristina

Re: Clarification de consigne -- Mattia A. Fritz (discussion) 11 décembre 2016 à 12:48 (CET)

Bonjour,

c'est tout simplement des éléments - surtout graphiques (images, SVG, ...) - que vous prenez ailleurs. Par exemple, si vous pensez faire du drag&drop avec 10 fruits, on vous demande d'essayer d'en dessiner au moins 3-4, les autres vous pouvez les prendre ailleurs (si la licence du site le permet, bien entendu).

Bonne dimanche, Mattia

Re: Re: Clarification de consigne -- Kristina (discussion) 11 décembre 2016 à 17:35 (CET)

Bonjour Mattia,

Merci :-)

Bonne dimanche à vous aussi.

Cordialement, Kristina

Comment afficher une alerte textuelle pour un "mauvais" glisser-déposer ? -- Andréa (discussion) 29 janvier 2017 à 00:36 (CET)

Bonsoir à tous,

Dans mon exercice 5, qui par miracle est déjà prêt (youhouuu !), les divers éléments doivent être glissés-déposés dans 2 containers différents. Mon travail se trouve dans l'emplacement suivant : http://tecfaetu.unige.ch/etu-maltt/wall-e/fariash7/stic-1/ex5/mallt-devoirs-ex5.html

J'aimerais insérer une alerte textuelle en cas d'erreur de glissade, du style "Mauvais choix".

J'ai trouvé sur Openclassrooms le code ci-dessous (JQuery) qui pourrait faire l'affaire :

$('p').on( 'click', function () {     alert("Mauvaise option") });

et j'ai essayé de l'incorporer dans le groupe de codes suivant de mon travail, sans succès :

<script>
       $(".item").draggable({
           revert: "invalid",
           cursor: "move",
       });
       $(".cours-container").droppable({
           accept: ".cours"
       });
       $(".loisir-container").droppable({
           accept: ".loisir"
       });
   </script>

Puis ensuite j'ai voulu créer une instruction avec la fonction if en Javascript et ai essayé d'écrire moi-même le code. Trop difficile pour moi. :o(

Est-ce que vous pourriez me donner deux ou trois indices sur comment trouver la solution à ce problème ? Super merci ! andréa

Re: Comment afficher une alerte textuelle pour un "mauvais" glisser-déposer ? -- Mattia A. Fritz (discussion) 29 janvier 2017 à 17:15 (CET)

Bonjour,

pour ce type de comportement il faut élaborer davantage votre logique de l'application en utilisant du codage lors de l'événement drop. Vous pouvez vous référez à la séction Drag&Drop avec code supplémentaire, et notamment l'exemple http://tecfaetu.unige.ch/perso/maltt/fritz0/guides/jquery-ui/ex8_droppable_custom_code.html, pour plus de détails.

Je vous déconseille en tout cas d'utiliser des alert() car elles bloques totalement l'accès à la page.

Mattia

Re: Re: Comment afficher une alerte textuelle pour un "mauvais" glisser-déposer ? -- Andréa (discussion) 29 janvier 2017 à 18:46 (CET)

Merci Mattia ! Je vais voir cela.

Une nouvelle page Edutechwiki -- Andréa (discussion) 30 janvier 2017 à 13:08 (CET)

Bonjour Mattia,

Je constate que mes camarades du Maltt utilisent google docs d'une manière très rudimentaire, comme on pourrait utiliser Notepad : sans aucune mise en forme ou mise en page particulière. Je trouve que c'est dommage, car, malgré la simplification de ce programme, Google Docs est un traitement de texte puissant qui peut produire des textes d'une grande qualité visuelle.

Dans le cadre de ma participation dans Edutechwiki pour les cours de Stic, je souhaiterais créer une page du style : Utiliser Google Docs avec une mise en page de qualité. Est-ce que ce thème serait accepté par le "comité de direction" ? Si oui, est-ce que vous pourriez démarrer une page pour moi ? Il me semble que nous devons créer une page avec une catégorie spécifique, etc.

D'autre part, je suis consciente de l'existence dans Edutech wiki de la page en construction "Google Docs en tant qu'outil d'awareness de groupe". Le contenu que je propose n'est pas concurrent à cette page, mais complémentaire.

Merci pour votre aide. Cordialement, andréa

Re: Une nouvelle page Edutechwiki -- Mattia A. Fritz (discussion) 30 janvier 2017 à 14:49 (CET)

Bonjour Andréa,

vous pouvez tout à fait faire votre contribution wiki sur ce type de sujet.

Vous pouvez créer n'importe quelle page vous-même (depuis les Guidelines:Edition de base) :

  • Créer une page revient simplement à créer un nouveau lien (depuis une autre page comme votre "home page", cliquer dessus, éditer et sauver.
  • Alternativement, utilisez rechercher (en haut à droite) pour chercher un nom de page. Si elle n'existe pas le Wiki propose de la créer.

Vous pouvez ensuite ajouter une ou plusieurs catégories dans lesquelles vous pensez que votre page peut/doit apparaître en ajoutant à la fin du code la notation suivante :

[[Category: Nom-de-la-catégorie-1]] [[Category: Nom-de-la-catégorie-2]] ...

Bien cordialement, Mattia