Enseignement > IHM > Examen 2011  

Examen du cours IHM
durée : 4 heures
Tout document autorisé

Cet examen comporte 2 parties indépendantes : une partie sur Java et une partie sur JQuery

Le résultat de votre examen devra comporter 2 fichiers zip disctincts qui seront envoyés par mail à l'issue de l'épreuve.
La notation tiendra compte de la clarté du code, des éventuels commentaires et de la qualité de l'ergonomie de l'application.

Partie Java

On souhaite réaliser un petit jeu : placer aux 4 coins d'une fenêtre un bouton ayant comme texte respectivement BLEU, ROUGE, VERT, JAUNE.

La couleur de fond de la fenêtre devra changer, tirée au sort parmi les couleurs BLEU, ROUGE, VERT, JAUNE et restera affichée un court instant durant lequel le joueur devra cliquer sur le bouton correspondant.

Au centre de la fenêtre, un compteur de points indiquera le nombre de tentatives réussies et le nombre de changement de couleurs effectués.

Vous aurez sans doute besoin d'utiliser l'instruction Theard.sleep

Pour les étudiants qui auraient terminé rapidement, on peut compliquer le jeu en réduisant le temps d'affichage à chaque tentative réussie.

Partie JQuery

Etudier cette page qui est l'API du moteur de recherche "Bing" pour rechercher des images.

Le but de l'exercice est d'utiliser JQuery pour

  • Ajouter et valider un formulaire de recherche permettant de taper des mots clés pour interroger Bing et trouver des images
  • Mettre en forme de manière plus ergonomique les résultats
  • Utiliser  la syntaxe JQuery pour simplifier le code Javascript, notamment les requètes AJAX en JSON

Clé nécessaire pour utiliser l'API de BING : AppId = "E464835187BB02465F1A23B760E3587E12D46C04"

Voici un exemple qui fonctionne avec le mot clé Jura

<html>
<script type="text/javascript"     src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<body>
<script>
$.getJSON("http://api.bing.net/json.aspx?AppId=E464835187BB02465F1A23B760E3587E12D46C04&Query=jura&Sources=Image&JsonType=callback&JsonCallback=?",
  function(data) {
  $("#output").html("Version de Bing : "+data.SearchResponse.Version+"<br/>");
  $("#output").append("Titre de la première image : "+data.SearchResponse.Image.Results[0].Title+"<br/>");
  $("#output").append("<img src='"+data.SearchResponse.Image.Results[0].Thumbnail.Url+"'/>"); 
    });
</script>
<div id="output"></div>
</body>
</html>

Pour les étudiants qui auraient terminé rapidement, mettre en place un système d'onglet (en JQuery UI) permettannt d'afficher les résultats sur Bing, mais également d'afficher dans un autre onglet les résultats de Yahoo Images, et les résultats de Google Images
 

Clé de Google API pour http://localhost :
ABQIAAAAFJliK45nvfuHDnka-sFpGhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRv6UANd1TQKUr9Avl3XmCw0LrWqw