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

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 29 : Ligne 29 :
Cordialement,
Cordialement,
Kristina
Kristina
== Ex 5, drag and drop... erreur dans le code -- [[Utilisateur:SirnaC|SirnaC]] ([[Discussion utilisateur:SirnaC|discussion]]) 4 janvier 2017 à 18:22 (CET) ==
Bonjour Mattia,
j'espère que vous avez passé de bonnes vacances!
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?
'''Ici le code dans le fichier .html:'''
<!doctype html>
<html>
<head>
    <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>
    <header>
        <p>Saludar y presentarse en español</p>
    </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>
</html>
'''Ici le code du fichier .css:'''
header {
            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:'''
$(".item").draggable({
    revert: "invalid",
    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"
});
Merci d'avance pour votre réponse et bonne reprise à vous aussi
Chiara

Version du 4 janvier 2017 à 19:22

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

Ex 5, drag and drop... erreur dans le code -- SirnaC (discussion) 4 janvier 2017 à 18:22 (CET)

Bonjour Mattia,

j'espère que vous avez passé de bonnes vacances!

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?

Ici le code dans le fichier .html:

<!doctype html> <html>

<head> 

   <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> 

   <header>

Saludar y presentarse en español

   </header>

Est-ce que vous vous rappelez comment ça ce fait?

Ce petit exercice vous permettra d'apprendre à saluer en español. Les images vous aideront à faire le bon choix... Bien! Alors lisez les instructions!

Associez les phrases avec l'image correspondante

Hola
Encantado
Adiós
Buenas noches
Buenos días
Mucho gusto
Buenas tardes
Hasta luego
Hasta la próxima

De día

De noche

Presentarse

Despedirse

Saludarse

   <script src="external/jquery/jquery.js"></script>
   <script src="jquery-ui.min.js"></script>
   <script src="ex5.js"></script>

</body> </html>

Ici le code du fichier .css: 

header {
           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:

$(".item").draggable({ 

   revert: "invalid",
   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"

});


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

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