HTML quiz game with Canvas - html

Hi I'm trying to create an html quiz game with canvas, but I'm new to this thing and I didn't find any documentation to this particular thing.
Game summary
The game is set into 5 scenes, every scene is a time period (prehistory, ancient Rome ecc..), and there is only a static image in the background with some shiny points. When the users click on that's point the game zoom on it, and appear a question. When the user answer to the question the scene zoom out and he can click on the next question. When the user has answered all the questions in that scene, the game moves on to the next.
My Problem
I can't find a valid documentation about this, and i really don't know where to start. My idea was to use bootstrap and include some plug-in to do this but i didn't find anyone. I know that there are better framework like angular to do this kind of game but I really don't have the time to learn something as that.
Someone as any idea about the better way to do that?

Are you storing people's progress on a database or communicating with Google Classroom (eg. to add scores to assignments? I would personally recommend using Google Apps Script and embedding it on an HTMLsave bag to get rid of the "watermark" that is displayed on top of Apps Script web apps. Here is some documentation to get you started:
Bootstrap Docs by W3Schools
Apps Script Overview and Docs

Related

Enabling click sound effectx

Full Disclosure, talk to me like I am stupid because, well, I kinda need to be guided.
I would like to create a series of web pages where the user would hear a sound when they would click on links whether it be photos or text links it doesn't really matter. The idea here is to generate an audio sound when a link is clicked. And I want that to be able to span across all clickable links in the HTML document. I am not sure how to do it and I'm not asking Google the right question because I'm learning how to do sounds for every other possible aspect of web development rather than this specific need. Might be because I haven't slept in 24 hours but I'm trying to create the Kobayashi Maru and it would be really cool if I could make the lcars computer sound effects.
So how can I make all the links play the same sound or ideally I'd like to be able to make sounds for active links and then a different sound for non active links but I would just settle for one sound effect right now. Could anybody please help me out?
I've tried various scripts but they are for specific objects

How to start an embedded kml tour?

This is my first post, wooohooo! I've been using stack exchange when I needed information but usually someone had the same problem as me and I didn't need to make a post. Which means this website is really good.
Now turns out I have a pretty unique problem.
Please check out http://gaia.tru.ca/birdMOVES/
You will see a website with a google map. It is connected to a db which will be automatically updated.
The purpose of this website is to track how birds feed. There is going to be bird feeders equipped with NFC all over the world to track birds equipped with RFID when they feed.
I am taking care of the front-end, the web app for visualizing.
This is a work in progress so try not to care about the looks of it.
Apparently everything was written in RApache because the person who made everything this far is a Geography teacher(Not a lot of programming background, I had to refactor his code and learn R because it wasn't in my array of known languages.)
My client asked me to add time animation to his map. Feasible with the help of Google Earth.
I made the existing R code generate a tour. It works perfectly and even shows on my map.
Here is the address of my dev server: http://thelab.dyndns.org:1080/birdmoves/
You can see that there is an extra check box for time animation. If you check it, the tour will appear as an object on the map (no way to use it whatsoever right now).
So what I'd like to know is how do I make it work? How do I make it autoplay when the submit button is pressed? With standard google earth controls for rewind, pause and fast-forward. And independently from the google maps without tour?
This is intense. I have the feeling google earth isn't going to work because they deprecated all their gadgets.
I'm on the clock and I need help.
In case you were wandering what eventually happened:
We ended up making a hybrid website where the static visualization is within Google maps using kml and the time animation is within CesiumJs using CZML.
CZML is based off JSON and can be used very similarly to kml.
The api is also very nice, it only takes one line of javascript code to get a map running on an existing server.
To implement time visualization CZML supports putting multiple consecutive values for almost any property(like position, to animate movement, or even color to change colors) and takes account of time.
Also very nice, CesiumJs supports animated 3d models!
If you're interested http://cesiumjs.org/
It also has a lot of support, documentation and tutorials... etc..
It's being maintained by professionals. I really recommend it.
The Google Earth API got deprecated and will not function by December this year which is not a viable option for a long term service. So cesium was the only option for this specific project.
Cheers

How would I get a Google Maps style interactive map on my game's site?

I run the RPG campaign called Yarona: Darkness Ascending. I also run the site http://diebot.org/ and I want to incorporate what's found at http://www.uesp.net/oblivion/map/obmap.shtml using my own continents, but where do I start?
Ok, I admit, Frank has a good point, I didn't consider that the external link could go offline 3 months down the road, then my question looses key information. My apologies.
What I have is a campaign that takes place on the world known as Yarona. I also have a large, world-atlas style map/graphic. what I want is to have a Google Maps style interface so my players can zoom out to continents, or zoom in as tight as city blocks, maybe even include "Special Place Pins".
Depa suggests that I try to get help from Google first. I did try that. The only thing I found was about maps of Earth, Earth and more Earth. Depa also suggested I include the code I've used so far, and I would have done so. The thing is that, to reiterate (and please forgive me if I seem flippant):
Where Do I Start?

Custom map for website

I have an overview drawing of a plant and I want to show the important pieces of equipment. Each piece of equipment would show some description information and have a link whenever it is hovered over.
I want the whole thing to function similarly to Google Maps where I can zoom in and pan around.
I have been trying to get the basic pan and zoom functions to work in Flash but are there better ways to develop this? Maybe something that doesn't involve Flash?
If you want to go for a flash-free, google maps-free plugin, you can combine http://wayfarerweb.com/jquery/plugins/mapbox/ with some jQuery for the mouseover behaviours.
It of course depends on how comfortable you are using jQuery, the implementation of the map itself is quite easy (it has zoom and pan), and the hovers are not complicated but will require more research if you haven't worked with javascript before. The advantage is that you will have complete control over it...

Depth map (2d+z) algorithm or software

I'm searching for Depth map algorithm for action scrip 3 (or some other language).
My goal is to generate depth map for static image on run time.
I have fount this example http://kode80.com/2009/06/29/papervision-zbuffer-and-dof/, i didn't have the time to investigate it's code but i have the filling its working only with 3d models.
Worst viable option is server side technology that does the work.
Extended description:
I have a task to develop flash application where 3d rotation of a head is simulated by a 2d image uploaded by the user.
There are some japan guys that have managed to do that (http://hairtry.jp/), but the technology that they are using is server side. It generates swf fail with precisely coped eyes and image for the depth map of the uploaded picture. I can't find out what is the sever side technology that they are using so I'm searching for any posible workarounds.
Thanks in advance.
Cheers,
Chavdar Slavov
your easiest solution would be to use a 3d engine, Paper vision seems to be getting out dated, theres a lot of documents on how to use, and tutorials but again not much has been happening with them lately. i suggest Away3d "www.away3d.com" they seem up to date.
for what your asking it is possible to do this 100% in flash but to create a 3d head at runtime and fill the face with hieght maps this is possible, you would need to look at bitmap manipulation.i dont think this is an easy task, what you should learn first is how to add an image to a spheric surface dynamically than look into height mapping by converting certain coulours from the image into different levels of depth i must say im sure this is advanced stuff, i manged to animate a globe that was this same method it looks dodgy but it gives you some source code in the FLA
http://www.ffiles.com/flash/animations/globe_animation_3496.html
The above link will allow you to download my source files, the animation it self is a scrolling image but i used Actionscript to give the globe depth and a sheric look