HTML Light Pop Quiz Framework With Instructions make quiz games easy - Web App Development

Hi fellow developers I made this very light Pop quiz framework so that you can easily make your own pop quiz using HTML . Now this framework is light and the coding works on all browsers and mobile devices basic auto-scale code included in the code. Now to use this framework download the source file its hosted on sourceforge and unzip the file. You will see the levelone.html file and popquizframework.png. Using a text editor ( Notepad++ for windows or textwrangler for Mac) open the levelone HTML file. Also get one photo from your computer that you will be using, dont worry about the size the coding will make it fit 300x300 not matter size of photo. Now lets begin. Take a look at the screenshot below and below the screenshot will be instructions on where to type in your commands. Its very easy since you don't have to touch the lower level code.
Pop Quiz Framework Download
http://sourceforge.net/projects/andromoapps/files/Frameworks.zip/download
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
1) That's the pop up alert box message when you get an answer wrong. You can change the "wrong answer try again" to wherever message you want or keep it as is.
2) You can change the words circled movie quiz to whatever your app will be
named and that will show in broswer tab or mobile device in bar along top of screen.
3) You can change the question inside the
tags to whatever question you would like the player to answer.
4) See where it says "Super.png" you can this to the photo you want to be placed. Make sure to have the proper file extension i.e. .png .jpeg etc.
5)These are the onscreen buttons that the player will click.
onclick="wrong()" that means if the player clicks this the answer is wrong and a pop-up box will appear.
onclick=location.href="leveltwo.html" means the player got the answer right and can move to next page.
So you can choose which selection you want to have right or wrong and type in the correct value.
6) This is where you will type the words that will show on the onscreen buttons. These are the choices that you will give the player playing your game.
Now after you finished making it and saving as html file app doubleclick on the html file to run on your computer!! Now your probably wondering how to make multiple levels. OK follow these instructions.
1) Your 1st file is levelone.html and when the player clicks the onclick=location.href="leveltwo.html" that means he is going to the second level. After you save the levelone.html file copy it and place it in another folder.
2) Now go back and edit the original file with the next question you have but on the onclick=location.href="leveltwo.html" change that to "levelthree.html . No go ahead and save the file your working on as leveltwo.html then copy and place it in another folder. Now you have 2 levels.
3) On each new level just make sure to change the onclick=location.href=" " to open the next level if the player got the answer right. Now go ahead and make some super games!!

Nice idea.
There are some problems with it though.
I don't think it's good to have to make a separate file for each question. That could be very time consuming if you have a lot of questions.
Also the Correct / Wrong structure might be good for what you were going for but might not be suited for other projects. But I suppose the wrong section can easily be ignored.
Not exactly what I'm looking for but I suppose it provides an easy solution for those who want to use it.

Thanks for the share.
Personally, when it comes to quick setup for use on the web, I'm biased towards JSON as a data source due to it's flexibility. If you are still looking in to the matter and comfortable with JavaScript, try checking out SlickQuiz (http://jewlofthelotus.github.io/SlickQuiz/)

Related

[Mort] M IExplorer - html skinned menus for Mortscript

So here's a new topic i am gonna be making shortly.
We r gonna use Pocket IE to edit Mortscript variables.
This will allow us to skin the choice statement, etc. Because we r running IE in kiosk/full screen mode we have 100% of the screen real estate.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
(Would look nicer with some graphics...)
This means we can use all the html form commands as mortscript variable selectors. Text Input, Round and square check boxes, pull down menus. Not to mention javascript form processing.
Enclosed is a working example.
Next update should include the javascript url interpreter to "hint"/fill the html form statements. I will of course find out how many variables we can work with on the url line.
Let me know if this does not work for u.
What u will see:
Run it, then IE will open and hopefully open full screen
then u will see a page asking for a text box and radios. fill em and click submit. It will go to a new page and then pop up with the url/form data.
If anybody wants to proceed further i have a much further developed code. IExplorer is easy to work with. I am just working on the Opera version.
Status & Issues
Status & Issues
html for Mobile phones
html layout.
Javascript to make the magic happen
Javascript
The easy to do: IExplorer is a pushover
IExplorer works no holds barred.
url is in the title. ? and & passed arguments show in the title.
Passing ? and & to a static web page works just fine
The not so easy: Opera is ok
Opera 8.65 and Opera 10 hopefully function similarly.
Full screen mode is great. Is there a shortcut to open the browser full screen? there very well may be.
Opera will not show the url in the title, BUT we can set the page title to be the URL and tada.
Now passing URL to a static page is turning out to be a like a bull fight.
How to pass the variable data in and out?
Third browser set?
Third browser set?
We might as well look out for additional browsers. Some may function perfectly right out of the box as long as we check.
UC
UCee
Skyfire
more
And btw.
I had thought for a moment that IE was not installed on certain ROMs.
I did decide not to bother with the other browser types... no reason.

[Concept] Application Lists

{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
With everyone trying to copy folders from iOS and Android i kind of got bored of it. Either way folders on WP7 will never work cause they don't match the design language.
Making application lists would save clutter and would act as storage folders to store certain app you want to hide out of the full application list.
My concept isn't new. Just different approach to categorising your apps. Which lets face it is pretty brutal in WP7. Jump lists are sort of a pain in the a$$ as well.
By clicking on a thread header (just like in the email threads) you will pop out the application list that you added to that thread.
If you pressed and held onto an app. Instead of the option pin the app and uninstal it to the start screen another option would pop up for making a new application list, as well as extra option to add the app to an existing list or remove it from the list if it is already in it.
Once you click on make a new list, you would be asked to name it.
After making a folder you can click on an app you want to add. Select add to a folder and a pop up would come up which folder do you want to add it to.
I think the start screen takes good care of making sure most apps you need are on it. This would ensure that the must need applications for you that you don't want to pin to the start screen are always there without a long list to scroll through.
Now to find some one to make it?
It's not a bad start (although I completely disagree with the idea that folders "don't match the design language", but that's a topic for a different discussion).
Your idea is a good one, but what I would rather see is a design where "opening" the folder/list would not expand it in place (that would just add more clutter IMO), but open a new pane to the right of the full app list that focuses on just the apps in the custom folder/list. Then, to get back to the full list you only need to swipe back to it, even if your custom folder/list more than fills the screen.
Maybe a people hub like group function can be implement to the app list too?
That could work too. It might not be as seamless as the people hub groups, but it could still be a possibility.
honestly I love the app list and the alphabetical jumplist. Finding apps is no problem. However they could implement "groups" for apps the way they do people. With the app live tile cycling through the app group main tile. So If I have "news" group with USA Today, Fuse, Fox news etc the Group live tile should show me the weather, latest national and tech news.
How I would change the app list is universal search. When you hit the search icon and enter some text say "microosft" it should present several pivots "apps" "emails" "documents" and "web" filtering out the search results in a metro manner. Infact if they could hardwire the bing key to do that I'd be happy.
Well its an idea I dont think a hub for apps would work cause it would mean you have to go into and out of the hub. Where as with a "group" "list" "thread" or a "folder" you can quickly open them and close them

Resources to learn how to build mobile games and apps using HTML+javascript

Ok I see a lot of question of basically how to start building games and apps using web languages. Here I will put together very useful information and you will be able to make games and apps with these resources.
A)Tutorials for Beginners to HTML there are 10 step by step tutorials that are extremely easy to follow.
http://htmlforlearning.blogspot.com/2013/07/introduction-to-htmllesson-1.html
---------------------------------------------------------------------------------------------------------------------------------------
B)Framework to build a pop quiz app in HTML with a little Javascript here on xda-developers
http://forum.xda-developers.com/showthread.php?t=2785378
-------------------------------------------------------------------------------------------------------------------------------------
C)Free 2014 calender and Calculator ready made in HTML . All you have to do is add the files to your project
2014 Calender activity
1) Download the zip file here http://sourceforge.net/projects/andromoapps/files/calender.zip/download
2) The main file is select.html .
Now for the calculator
1) Download the zip file here http://sourceforge.net/projects/pfbw/files/calculator.html/download
2) The main file is calculator.html .
These can be used as stand alone apps or best used as an added feature to your app. I suggest you add these as extra activities to your main app so that users will have a reason to come back to use your app example lets say they need the 2014 calender they will just go to your app since they know its in there already. Its all about using as many activities as you can so that your app has a lot of functionality.
---------------------------------------------------------------------------------------------------------------------
For Advanced Users How to Add facebook and Twitter intergration inot your apps.
Ok the facebook intergration is easy , first I will post the code then explain it.
<img src="fshare.png" onclick=location.href="http://m.facebook.com/sharer.php?u=http://androidfreegamesapps.forumotion.com/t1136-8-bit-super-mario-bros-spiky-jump-for-android#2464";
style="position:absolute;left:0px;top:80px;height:60px;width:100px" />
WHAT IT MEANS AND HOW TO EDIT
<img src="fshare.png" means I am placing a image onscreen as a button "fshare.png" is the name of the image I used.
onclick= means I am making this image clickable
location.href= means this is the website I want the button to open
http://m.facebook.com/sharer.php?u=" PLACE YOUR WEBSITE LINK HERE "
style="position:absolute;left:0px;top:80px;height:60px;width:100px" this is to set the location of the button onscreen.
Now on to twitter intergration , the code is much longer but you only have to add the link.
<a href="https://twitter.com/share" class="twitter-share-button"
data-text="http://androidfreegamesapps.forumotion.com/t1136-8-bit-super-mario-bros-spiky-jump-for-android#2464 Super Mario Bros for #Android"
data-count="none">Tweet</a>
<script>!function(d,s,id)
{var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}
(document, 'script', 'twitter-wjs');</script>
HOW TO EDIT AND WHAT IT MEANS
All you have to change is
data-text="http://androidfreegamesapps.forumotion.com/t1136-8-bit-super-mario-bros-spiky-jump-for-android#2464
Super Mario Bros for #Android"
data-text=" YOUR LINK GOES HERE + YOU CAN TYPE IN A MESSAGE"
I advise you to just copy and paste my code then make the slight changes. Any questions just ask!! - See more at: http://forums.andromo.com/discussio...itter-share-in-your-app-#sthash.uSundpMX.dpuf
Game made with HTML + Javascript and made into an apk using phonegap.
Play as Max avoiding bombs being thrown at him by angry miners. Casual and Hard modes plus simple tap controls make this the best pick up and play game.
http://androidfreeware.net/download-bomb-attack-max.html
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Anyone else have resources they would like to share?
I always found trouble using phone gap why so

Problems using Linux Firefox and Chromium to create/edit forum posts

Today Firefox decided not to let me edit one of my larger posts. When I selected edit, it came up blank. Nadda, nothing. Also tried to edit another one and it no longer does WYSIWYG.
Am I missing something new?
Also I can't really use Chromium to edit either because it doesn't support WYSIWYG at all. And when I pasted my newly edited thread content in, I lost all my hyperlinks...:silly:
I'm going to install Chrome to see how that fairs...
Edit: Tried Windows Firefox and Chrome also with no results either. Guess I'll just have to keep my post small and simple....
Hi
I am on Xubuntu 64 bit running firefox from unpack bz2 rather than from repo.
Also unpack is on its own data partition so I can image using fsarchiver.
try right hand clicking the edit button and there should be an option to "inspect element"
post that element when you can.....maybe there is a little fault in the javascript?
aus9 said:
Hi
I am on Xubuntu 64 bit running firefox from unpack bz2 rather than from repo.
Also unpack is on its own data partition so I can image using fsarchiver.
try right hand clicking the edit button and there should be an option to "inspect element"
post that element when you can.....maybe there is a little fault in the javascript?
Click to expand...
Click to collapse
Actually it's too late to check. I got frustrated and cut most of the content out and put it in a text file for anyone needing the information. It was mostly background stuff anyway. I think there is a character limit, but it doesn't give a character count, so you just end up finding out when it happens.
4945
Ok as a work-a-round on your next big post
prepare it on Linux text editor
show the format as ....but change img to u r l with no gaps....my post count too low to show it
Code:
[img]imagesrc[/img]
good luck
Sounds strange, haven't heard of this. Check which plugins you have installed, I have seen some block proper editing. If you have the issue again, check to see if you can inspect with Chrome or FF to see where the mistake might be coming in.
bitpushr said:
Sounds strange, haven't heard of this. Check which plugins you have installed, I have seen some block proper editing. If you have the issue again, check to see if you can inspect with Chrome or FF to see where the mistake might be coming in.
Click to expand...
Click to collapse
I've had the same result with Firefox in Windows also. I must have been a character limit thing...
From my Debloated Stock LG-G3, VS985 4G VZN
Also Firefox and Chrome editors are different. Chrome doesn't allow wysiwyg display. The button is literally missing.
Chrome:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Firefox:

user profile section is a mess, and few other questions ..

{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
this is first question.
1. What " Edit profile banner" means, what file i should upload, in which format, and what i can type in that file which can be used by forum properly to display all information.
When i click on " Edit profile banner" i get:
is that some sort of background image that needs to be upladed?
i don't want to mess with it, to make it worse, as i wouldn't know how to revert it back.
2. And isn't that confusing, don't we already have fields to fill our info (our short description, social media usernames, links to websites, which are not showing by the way as you can see.
Here we are filling our info that's not showing on profile, so what's purpose of it then.
thank devs and all involved in hard work for this, your work is appreciated
indestructible master said:
View attachment 5254963
this is first question.
1. What " Edit profile banner" means, what file i should upload, in which format, and what i can type in that file which can be used by forum properly to display all information.
When i click on " Edit profile banner" i get:
View attachment 5254979
is that some sort of background image that needs to be upladed?
i don't want to mess with it, to make it worse, as i wouldn't know how to revert it back.
2. And isn't that confusing, don't we already have fields to fill our info (our short description, social media usernames, links to websites, which are not showing by the way as you can see.
Here we are filling our info that's not showing on profile, so what's purpose of it then.
View attachment 5254993
thank devs and all involved in hard work for this, your work is appreciated
Click to expand...
Click to collapse
1) Check my profil by hovering over my username, you'll see what's a banner (mine is one wallpaper from android kitkat I like a lot). Yes that's reversible, you can remove the banner at anytime. Idk for the dimensions, and the upload format is the classical png, jpeg, ... images format.
2)Account details are showing up for me, I just added my GitHub and it show up, maybe check your privacy options
Raiz said:
1) Check my profil by hovering over my username, you'll see what's a banner (mine is one wallpaper from android kitkat I like a lot). Yes that's reversible, you can remove the banner at anytime. Idk for the dimensions, and the upload format is the classical png, jpeg, ... images format.
2)Account details are showing up for me, I just added my GitHub and it show up, maybe check your privacy options
Click to expand...
Click to collapse
damn, now i have it too (banner image when hovering on profile icon)
and i just seen About section in profile, that's where all went.
but, it would be useful, in popup (when clicking on "edit banner", to add small description like "add image to your profile banner"
as user would understand it's that background image, and it accept .img files
(i got confused, when it opened in file explorer saying "all formats", i just tought, what this even mean?,
so include default to search for .jpg, while allowing other .img formats too,
as it confused me, what i should upload at all)
was confused, as xda never had proper profile section displayed, and image banner is new too for me on this forum.

Categories

Resources