Quiz de carte

RichieCarmichael

<\/HEAD>

<\/A>

Map Quiz est un jeu géographique amusant basé sur JavaScript développé par le Applications Prototype Lab. Le jeu teste vos connaissances géographiques avec six images satellites sélectionnées aléatoirement. Prouvez que vous êtes un génie de la géographie à la maison, à l'école ou sur votre lieu de travail !

Cliquez ici<\/A> pour accéder à l'application en direct.

Cliquez ici<\/A> pour télécharger le code source.<\/P>

Introduction<\/H2>
Ce projet est un portage d'une application initialement développée comme application Windows Store.  Le but de l'application est de présenter un jeu amusant axé sur la géographie (ou "geo-game") basé sur la technologie Esri<\/A>.  L'application est principalement basée sur l'ArcGIS API for JavaScript<\/A> d'Esri et est alimentée par les services hébergés ArcGIS Online<\/A> (AGOL) pour le score et les questions.  À l'origine, l'application Windows Store utilisait une authentification basée sur AGOL, dans l'édition JavaScript nous avons décidé d'utiliser l'authentification Facebook afin d'attirer un large public.<\/P>

Pourquoi Facebook ?<\/H2>
L'une des motivations du jeu est le frisson de la compétition, que ce soit personnellement ou avec d'autres.  Pour identifier les utilisateurs afin qu'ils puissent suivre leurs scores, ou ceux des autres, il fallait une forme d'authentification.  Le choix évident est AGOL.  AGOL est le choix parfait lorsque la collaboration est nécessaire au sein de la communauté SIG mais une grande partie du public cible de cette application peut ne pas avoir de credentials AGOL. On peut dire que Facebook n'est peut-être pas complètement omniprésent mais certainement courant.  Ainsi, nous avons décidé d'utiliser Facebook et l'API Facebook pour authentifier les utilisateurs.  Pour apaiser les préoccupations relatives à la vie privée, cette application demande et affiche seulement un petit sous-ensemble d'informations de profil, spécifiquement, la photo de profil d'une personne, son nom de famille et l'initiale du prénom.<\/P>Contrôle d'accès aux services hébergés<\/H2>
Les questions, réponses et scores du jeu sont stockés dans deux services d'entités hébergés ArcGIS Online.  Les services hébergés sont faciles à créer et permettent des requêtes spatiales puissantes.  Cependant, l'accès aux services hébergés est soit illimité, soit confiné à une organisation ou aux utilisateurs appartenant à des groupes spécifiques.  Parce que ce jeu est destiné aux utilisateurs non-AGOL, nous avions besoin d'un moyen de restreindre l'accès aux services hébergés uniquement à l'<\EM> application web Map Quiz.

Cela a été réalisé en enregistrant l'application<\/A> sur AGOL.  L'id et le secret de l'application résultants ont ensuite été utilisés dans un proxy web qui accordait un accès exclusif aux services hébergés uniquement à l'application web Map Quiz.  Le proxy et les instructions pour sa mise en œuvre sont ici<\/A>.<\/P>

Rotation<\/H2>
La carte tournante sur la page d'accueil ou le zoom progressif de chaque question est réalisé grâce à l'animation CSS3 et à la bibliothèque JavaScript animo (voir ci-dessus).  Sur les navigateurs modernes, les effets d'animation sont fluides et cohérents.  Concernant la carte tournante, les bords de la carte ont dû être étendus vers l'extérieur pour éviter que des zones blanches n'apparaissent dans les coins.  Pour éviter cela, nous avons appliqué des marges négatives en utilisant un calcul pythagoricien.  Un inconvénient de la carte tournante est que des coutures d'image sont parfois observées.<\/P>Silverlight vs. JavaScript<\/H2>
En tant qu'ancien développeur Silverlight, j'ai été agréablement surpris par les performances et les capacités des applications web basées sur JavaScript.  À ce jour, je n'ai pas encore rencontré une capacité Silverlight qui ne puisse être réalisée avec HTML5\/_CSS3.  Le plus grand problème a été le changement de paradigme du grand framework bien documenté de Silverlight à la nécessité de travailler avec une demi-douzaine de bibliothèques open source peu documentées.<\/P>Bibliothèques utilisées<\/H2>
Comme mentionné ci-dessus, ce projet est basé sur quelques bibliothèques open source, ces bibliothèques sont listées et décrites ci-dessous.<\/P>animo.js<\/A> par Daniel Raftery<\/A>C'est une petite bibliothèque puissante qui permet la création et la gestion programmatiques des animations CSS.<\/EM><\/LI><\/UL><\/DIV><\/>ArcGIS API for JavaScript<\/A> par <A href="http:\/\/www.esri.com\/

Nore8429

Hello, I'm trying to use the app but the button to log in doesn't appear. Can any one tell what it's wrong please.

Thank you.