Scribd Logo
Importer

Bienvenue sur Scribd !

  • 116 vues

    TP2 Appinventor Quiz

    Transféré par

    freeads 2050
    Le document décrit la création d'un quiz sur des animaux domestiques en trois écrans avec l'application App Inventor. L'écran 1 présente le bouton pour démarrer le quiz. L'écran 2 affiche une question avec des images d'animaux et une zone de réponse. L'écran 3 affiche le résultat.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd

    TP2 Appinventor Quiz

    Transféré par

    freeads 2050
    116 vues4 pages
    Le document décrit la création d'un quiz sur des animaux domestiques en trois écrans avec l'application App Inventor. L'écran 1 présente le bouton pour démarrer le quiz. L'écran 2 affiche une question avec des images d'animaux et une zone de réponse. L'écran 3 affiche le résultat.

    Description originale:

    Quizz app inventor

    Titre original

    TP2-Appinventor-Quiz

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Le document décrit la création d'un quiz sur des animaux domestiques en trois écrans avec l'application App Inventor. L'écran 1 présente le bouton pour démarrer le quiz. L'écran 2 affiche une question avec des images d'animaux et une zone de réponse. L'écran 3 affiche le résultat.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    116 vues4 pages

    TP2 Appinventor Quiz

    Transféré par

    freeads 2050
    Le document décrit la création d'un quiz sur des animaux domestiques en trois écrans avec l'application App Inventor. L'écran 1 présente le bouton pour démarrer le quiz. L'écran 2 affiche une question avec des images d'animaux et une zone de réponse. L'écran 3 affiche le résultat.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    sur 4

    Nom : …..........................................

    5S5 Classe : ...°....

    1- Définir l'interface graphique de pilotage écran 1 : Partie DESIGNER

    Pourquoi ?
    Réaliser un Quizz sur un thème de LV-

    Programme en ligne avec AppInventor 2 :


    Écran 1 :
    1
    1-Se connecter à AI2 ''MIT App Inventor 2'' avec un compte Gmail.
    2-Franciser l'interface(menu English vers Francais) puis Projet ; Commencer un nouveau
    projet...(nom_sans_espace)
    3-Charger les fichiers média : (image, sons : QUIZZ.png, canard.png, chat.png,
    cheval.png) (images de ~100 pixels de large)
    4-Glisser-déposer les objets dans l'interface, 5-les renommer, 6-les paramétrer.
    à partir de la palette Disposition : - Glisser :
    - 1 Arrangement vertical ( Alignement horizontal = Centrer ; Largeur = Remplir parent ; ) Écran 1 
    et dans l'arrangement vertical : à partir de la palette Interface utilisateur - Glisser :
    - 1 Image, Image1_quizz ; (Image = QUIZZ.png... ; )
    - 1 Bouton : Bouton1_jouer : (Forme = Arrondi ; Texte = A vous de jouer ! ; Alignement texte =
    centre1 ; )
    Tester (visualiser)dans l’émulateur ou sa tablette/smartphone l'interface générée.
    1- Lancer en 2 2
    tâche de fond à
    partir du bureau,
    aiStarter (module
    de com installé
    sur le PC)
    2- Se connecter à
    l’Émulateur (ou par USB,
    6
    Wifi(compagnon AI)) 5
    1 à 2 minutes pour se
    lancer

    r
    r-dé pose
    Glisse 4
    Modification
    Composants

    3
    Paramétrage
    composants

    Chargement
    Émulateur fichier média

    Palette de Interface graphique


    composants

    Clg M.Bony-63150-Murat le quaire


    Nom : …..........................................
    5S5 Classe : ...°....

    2- Définir l'interface graphique de pilotage écran 2 : Partie DESIGNER

    Pourquoi ?
    Réaliser un Quizz sur un thème de LV.

    Programme en ligne avec AppInventor 2 :


    Écran 2 :
    1-Ajouter un écran (menu Ajouter écran...) le nommer ecran2 puis OK
    2-Vérifier le chargement des fichiers média : (image, sons : QUIZZ.png, canard.png, chat.png, cheval.png)
    (images de ~100 pixels de large)
    4-Glisser-déposer les objets dans l'interface, 5-les renommer, 6-les paramétrer.
    à partir de la palette Interface utilisateur - Glisser :
    - 1 Label : Label1_titre : (Taille police=20 ; Largeur=Remplir parent... ; Texte=Les animaux domestiques ;
    Alignement texte = centre1 )
    - 1 Label : Label2_question : (Texte=Saisir le nom de l'animal suivant : )
    - 1 Label : Label3_validation : (Hauteur = 20 pixels ; Largeur = Remplir parent... ; Texte = (vide) ;
    Alignement texte = centre1 )
    à partir de la palette Disposition : - Glisser :
    - 1 Arrangement vertical ( Alignement horizontal = Centrer ; Largeur = Remplir parent ; )
    et dans l'arrangement vertical : à partir de la palette Interface utilisateur - Glisser : Écran 2 
    - 1 Image, Image1_question ;
    à partir de la palette Disposition : - Glisser :
    - 1 Arrangement horizontal ( Alignement horizontal = Centrer ; Largeur = Remplir parent ; Couleur
    de fond = orange)
    et dans l'arrangement horizontal : à partir de la palette Interface utilisateur - Glisser :
    - 1 Zone de texte, reponse_Zone_de_texte1 ;
    - 1 Bouton : reponse_Bouton1 : (Couleur de fond = vert ; Hauteur = Remplir parent ; Forme =
    Arrondi ; Texte = Soumettre la réponse ; Alignement texte = centre1 ; )

    Tester (visualiser)dans l’émulateur ou sa tablette/smartphone l'interface générée.


    1- Lancer en
    tâche de fond à
    partir du bureau, 5 6
    aiStarter (module
    de com installé
    sur le PC)
    2- Se connecter à
    l’Émulateur (ou par USB,
    er
    Wifi(compagnon AI))
    er -dépos
    1 à 2 minutes pour se Gliss 4
    lancer

    Modification
    Composants

    3
    Émulateur

    Paramétrage
    Chargement composants
    Palette de Interface graphique fichier média
    composants
    Clg M.Bony-63150-Murat le quaire
    Nom : …..........................................
    5S5 Classe : ...°....

    3- Définir le programme de pilotage écrans 1-2-3 : Partie BLOCS


    Pourquoi ?
    Réaliser un Quizz sur un thème de LV.

    Programme en ligne avec AppInventor 2 suite :


    1-Basculer dans l'interface Blocs
    2-Glisser-déposer les blocs de programmation en fonction des couleurs et des composants, à
    partir de la palette de Blocs :

    Écran 1 : Écran


    3 :

    Palette de blocs de
    programmation composants

    Écran 1
    2 :
    Association listes questions-réponses Initialisation lorsque l’écran 2 se lance
    Place variable index liste sur le premier élément
    Attribue au bloc image la 1ere image de la liste

    Actions bouton réponse activé


    Efface le bloc texte qui reçoit le résultat de la réponse

    Compare si la zone réponse = réponse liste


    s er

    2
    po

    Efface zone réponse et affiche un message de réussite


    é
    r-d

    Ajoute 1 à la variable index liste


    sse

    Compare l'index liste/taille de la liste


    Gli

    Sort du quizz et affiche l’écran 3

    Attribue l'image suivante dans la liste

    Affiche un message d'erreur

    3-Tester (visualiser) dans l’émulateur ou sa tablette/smartphone le programme généré.


    - Lancer si besoin, en tâche de fond à partir du bureau, aiStarter (module de com installé sur le PC)
    - Se connecter à l’Émulateur (ou par USB, Wifi(compagnon AI))1 à 2 minutes pour se lancer

    4-Enregistrer le fichier au format .apk (menu Construire ; App (enregistrer . Apk


    ……)) puis le récupérer sur son smartphone et l'installer comme une appli android
    classique.

    5-Lancer le programme et tester avec son smartphone le programme de pilotage Clg M.Bony-63150-Murat le quaire
    Nom : …..........................................
    5S5 Classe : ...°....

    1- Adapter le quizz à partir de ses propres textes, images ou sons écrans 2 : DESIGNER
    1-Se connecter à AI2 ''MIT App Inventor 2'' avec un compte Gmail.
    2-Franciser l'interface(menu English vers Francais) puis Projet ; importer mon projet (,aia) de
    l'ordinateur projet… puis Enregistrer le projet sous ... (nom_sans_espace)
    3-Charger les fichiers média si besoin : (image (.png), sons(.wav) : (images de ~100 pixels de large)

    2- Définir les blocs question-reponse-aide écrans 2 : BLOCS


    4-Modifier par Glisser-déposer les blocs de programmation en fonction
    des couleurs et des composants, à partir de la palette de Blocs :

    3- Ajuster les images à la bonne taille et les renommer avec PHOTOFILTRE


    1-Récupérer les images sur internet et les enregistrer dans un dossier image ou médias.
    2- Lancer Photofiltre puis ouvrir une image (menu Fichier, Ouvrir …)
    3- Définir la taille de l'image (menu Image, Taille de l'image , Largeur <100 pixels)
    4- Enregistrer l'image sous… (nom_sans_espace)

    4- Personnaliser, avec ses images, ses sons, les écrans 1-2-4-5 : DESIGNER-BLOCS
    1-Charger les fichiers médias supplémentaires dans DESIGNER
    2- A partir de DESIGNER, les insérer dans les écrans.

    5- Sauvegarder son projet et l'installer sur un appareil Android


    1-Générer un fichier .APK pour une installation sur son appareil Android : menu Construire ; App(enregistrer .apk sur mon
    ordinateur)
    2-Récupérer son fichier sur son smartphone :
    3-Lancer l'installation de l'application APK :

    Clg M.Bony-63150-Murat le quaire

    Vous aimerez peut-être aussi