We currently have an interactive pdf book with hotspots for students teaching them social science. It loads the following data all made with Flash in pop-ups once a hotspot is clicked in the pdf:
Bar Graphs that grows on loading popup
Titles that load on click like you can do in PowerPoint. One title below the other. So each click loads another title
Drag and drop answering of questions - Preferably option to drag answer to question and make it bounce when incorrect.
Videos
We would like all of it to be made with HTML5, but we are not certain we can do all this and make it as good as it is made in Flash now.
Let's focus on one item I need to get running with HTML5
Drag and drop Q & A
Drag and drop answering of questions does not seem to exist according to (jQuery plugin to) drag & drop answers in multiple choice quiz . Drag and drop of course does, but perhaps there is more code out there that I can use to drag an answer to the question and get a confirmation that the answer is correct?
Update
Moodle does use drag and drop matching for 2 years or so, so it is possible: https://moodle.org/mod/forum/discuss.php?d=165923 Will need to see if I can refactor their code for WordPress or standalone use.
Has anyone experience with this? Is it possible to make this script or another script make a dragged answer bounce when it is dragged to the wrong box or area?
Related
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
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
I have an HTML list of music tracks in a website. Some of them can be previewed with an audio sample.
I want to implement a triangle (play button) in front of each of those tracks, so that the visitor can click on each of those and hear a short audio sample. If the visitor clicks on another track before the previous is done, the latter should stop and the new one should play.
Is this simple plan implementable without much effort? I am good at HTML and CSS, but i can't write JavaScript. I've researched the audio-controls attribute, but it gives me a complete player with a bunch of controls that i don't want displayed.
Are there any tutorials you guys could point me to, if this is only possible with java-script?
Wow, no answer for weeks...
But i found a solution myself. Everything that i described works with a small jQuery player i found here: https://github.com/kuantal/Multiple-circular-player . I can have multiple instances and the script is "intelligent" enough to let only one single instance play at the same time.
Props to the author of the script - well done!
Hoping someone can help me find a good mobile web solution for handling the UI for something along the lines of picking horses in a race to "win", "place" or "show".
I'd like users to be presented with a relatively short list of, say, horse names w/small picture and then be able to drag them into one of 3 drop zones (each of which accepts one and only one name). Server should then be told the ID of the horse in each drop zone. Ideally names would animate into drop zone if dropped near it, but snapping ok too.
Rails back-end but that shouldn't really matter.
Needs to work with mobile screens (touch drag & drop)...and ideally standard browsers as well,. JQuery UI and JQuery Mobile get close with their "sortable" demos. But that appears to be directed for re-organizing a list. I need help creating "drop zones" and submitting contents of each back to server.
Ideas? Perhaps someone has seen some sample code along these lines?
Similar stack overflow question :
I'd check out this stack overflow question if you haven't already. Javascript Drag and drop for touch devices
1st Alternative:
There is this JQuery UI Drag drop and sortables blog by simon battersby
2nd Alternative:
There is JQUery mobile drag and drop by Steve Fenton
3rd Alternative:
I'd try sencha touch. It might be more than what you are looking for, but it is a great mobile js framework that should have what you need.
http://www.sencha.com/forum/showthread.php?102154-Drag-drop-sort-in-Touch&p=659116#post659116
Some of my users will be creating flowcharts..The idea is that at certain steps, the charts will allow the user to click on the text to go to another chart, or a manual or something.
My task will be to get these charts online.
The idea of hand coding these inside HTML seems crazy, so I was wondering if anyone had any suggestions?
Ideally, I would allow the users a tool to design the charts how they wish, and they could export it to something I could import into my page...They could either create linkable content inside the software, or if the html generated was neat enough I could do this bit myself.
Has anyone else come across a problem like this?
I've used Graphviz (link) to create flowcharts in HTML (an example of usage in real world: google wave used it to draw flowcharts in the waves). In the generated flowchart you can include links associated with nodes, edges, titles, etc. When a user clicks on a link, your software can re-render an image with the data of the new flowchart. Can be exported to png, svg, etc so is kind of easy to include it.