Leaning Programming Short Quiz Interfacing Tutorial
The original mobile and web Learning Programming application is every bit as much a game as it is a quiz, but we’re pretty sure there will be users out there not very interested in the “game” aspects to this. That is why we designed this almost totally pared down “quiz” only, except that a game score is updated.
But, today, we want to give the user the choice to access this “short quiz” mode of play versus the default “game” and “quiz” mode of play.
Along the way, we’ve introduced some new Emojis for aesthetic purposes, including the two “minus sign” Emojis introduced as the link from the “game quiz” to the “short quiz”. Back again, the “short quiz” can access the “game quiz” by clicking on the “short quiz” <h1> … </h1> heading up the top of the webpage. Hopefully, this arrangement is more straightforward than involving options on HTML select element dropdowns, which we tried for a while. Dropdowns of size greater than one may serve that same strength of purpose as a (Emoji) button, but, for instance, mobile platforms do not support that HTML select element size property greater than one.
You can see this in play two ways …
- Learning Programming Short Quiz that can access the Game Quiz via click/tap the heading
- Learning Programming Game Quiz that can access the Short Quiz via a click/tap of its minus-minus Emoji button
… and we hope you find some time to try this out for yourself.
Leaning Programming Short Quiz Tutorial
Do you remember?
- client pre-emptive HTML iframe element ideas we’ve had at this blog
- the recent separated radio buttons work
- our Learning Programming web and mobile app written in PHP
Even if … you didn’t want to go to rehab either … no, no, no … it’s easy to get up to speed. Take a look at …
- client pre-emptive HTML iframe element ideas and techniques we used converting XML to HTML
- separated radio buttons work allows for lots of content between left floating radio buttons as discussed at Elevation Game Separated Radio Buttons Primer Tutorial
- Learning Programming is a quiz and game
… and if you examine today’s Short Quiz version of the more “gamy” Learning Programming app, written just in HTML and CSS and Javascript as per the code you could call short_quiz.html you’ll see how the client pre-emptive HTML iframe approach allows for a client side solution to a problem that is a bit serverside, in that our quiz questions and answers and explanations are stored in flat files on a web server, but that the fact that we know …
- where they are
- what their filenames follow the pattern of ( ie. in PHP glob terms they are all at http://www.rjmprogramming.com.au/Learning/Programming/ with the filespec Student_Question_*.q )
- what the numerical range “*” represents above
… means that we can “swing it” just setting a question number in that range above and opening that file in an HTML iframe. Now, in the past, we’ve mainly opened HTML files with this technique, but today we are opening text files and end up using …
aconto.body.innerText
… rather than the more usual aconto.body.innerHTML we’ve used more often in the past. When the “acont” HTML iframe document object is presented under the guise of the innerText property, the output is encased in a <pre> … </pre> HTML element, that we peel off as we store this question and answer and explanation data into a Javascript global variable that called into play similar data to what we constructed for the “separated radio buttons” work, but today that separated data is just the wording of the multiple choice options for the user to select from, to see whether they are correct. If you are wrong, a Javascript alert box displays an explanation of the answer. So, there you have a very pared down version of our Learning Programming app, but sharing the same content, so we locate the HTML where that Learning Programming code sits, as well … first draft.
Previous relevant Elevation Game Separated Radio Buttons Primer Tutorial is shown below.
Elevation Game Separated Radio Buttons Primer Tutorial
If you were around for the recent Golden Ratio Game CSS Tutorial, and tried out this game, was it in the back (or front) of your mind, that if it had been you writing the code you’d have preferred to use input type=radio rather than type=button with those decision maker elements up the top? Am sure there are a lot of people like you. Today, we write a new game using HTML input type=radio elements, and we delve into the idea of a lot of HTML “plonked” in between. Yes, those usual label tags can have a lot of Javascript DOM innerHTML “filling”, should you like to go down that path. We like the idea because the radio buttons line up at the left and context lies under it. This, we feel, is good for decision making. It means if we start today’s game with its default live run look, the decision is yet to be made by the user whether to pick a …
- Harder … or …
- Easier
… mode of play for today’s HTML and Javascrript (DOM) “Elevation Game” where one unknown out of …
- Harder’s elevation, altitude, distance, height … or …
- Easier’s elevation, altitude, distance
… is what the user solves for, and we can, with “separated” radio buttons, place in a diagram we’ve constructed to explain the situation to the user.
We hope you enjoy the game whose HTML and Javascript code you could call separated_radio.html as you see fit.
Previous relevant Golden Ratio Game CSS Tutorial is shown below.
Golden Ratio Game CSS Tutorial
We wanted to add some styling to improve on our Golden Ratio Game we started yesterday with our Golden Ratio Primer Tutorial. These styling improvements relate to us wanting to add a Degree of Difficulty mode of play for the game, because we see that there is scope to …
- make the answer terribly predictable for the whole game
- make the rectangles more or less similar in their dimensions approximating the Golden Ratio dimensions
- rotate the rectangles and introduce overlaying and non-even display conditions, for obfuscation purposes
… which allows for scope for some differentiation with the scoring in the game, in that the harder modes of use score more points per correct choice.
Also wanted to introduce a nuanced 3D look to the HTML div elements that are the rectangles in the game. We found an excellent website here to help with achieving this with a shadow box and some border effects.
And we add more (of our favourite) CSS backgroundColor effects to help section off parts of the game display from others.
As far as the the HTML div element rotations go in that “Hardest” level of difficulty (mode of play) we, perhaps, could have arranged a CSS way of doing this, by the same …
location.href=document.URL.split('#')[0].split('?')[0] + '?score=' + score + '&goes=' + goes + '&difficulty=' + this.value;
… HTML (select element) difficulty “dropdown” onchange event logic means of doing it, but today, as we’ve done before, at Analogue Clock Primer Tutorial, we’ve dynamically arranged the three HTML div elements to get three Javascript DOM arranged rotations, as each new set of 3 rectangles is displayed. See that previous link for the basis of the code used to do this.
So that leaves us with the HTML and Javascript and CSS golden_ratio_game.html is associated with this live run link, and which changed in this way. We hope you try out the game, enjoy it, and perhaps use it as the launching pad for ideas of your own.
Previous relevant Golden Ratio Game Primer Tutorial is shown below.
Golden Ratio Game Primer Tutorial
Today we have a Golden Ratio Game for you. In mathematics and architectural design, there is a ratio of rectangular dimensions that appeals to the human pysche, and this magical irrational number, close to …
1.6180339887
… we gleaned from Wikipedia’s Golden Ratio webpage, so, thanks.
These Golden Ratio proportions are no mathematical accident, and you should read more at that Wikipedia link above, which, in summary, tells us that that irrational number above equates to …
(1 + √5) / 2
The code today is HTML with some Javascript DOM workings could be called golden_ratio_game.html And you can try it out with today’s live run link, and see whether you can pick what appeals to so many others. As with many games, it features lots of calls such as …
colis[0]=bcols[Math.floor(Math.random() * bcols.length)];
… to add that element of randomosity to your web application games.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
