JavaScript is a scam

[CommanderKeith]

Thanks for the pointers Onyx.

So you had to display matrix mathematics in your survey, that must have been difficult. I have to put maths equations in my tests and I'm doing it using plain images. MathML would have made that a lot easier, I wish it was implemented by the browsers.

SCORM sounds good, but there's no demo on the site of what it actually looks like to the user and I'm trying to avoid locking into a big clunky framework when all i want is a simple interface to deliver tests.

The tips about error checking (ctrl+shift+j which works in Chrome too) and putting the javascript in its own .js file were great, thanks guys.

This is my project so far: www.keithwoodward.com/finance. It doesn't do anything except tell you if you're wrong or right.

The next hard thing that I have to figure out is how to display the worked solution in the web page after the user gets the answer wrong. I can't include it in the public html file or else they'll cheat by looking it up before hand, so I'm thinking I'll put the question and answers in a private html file that the public index.html file's PHP script has access to, and it will serve up the questions without the answers, then serve up the answer using AJAX after the user gets the answer wrong. That will be a pain in the butt for me to learn since the answer will have text and images and I'll have to figure out how to send images in an XMLHttpRequest. I'm wishing my freehostia web host could run other things instead of PHP and ASP. It looks like Java Server Pages would have been ideal for me, but freehostia doesn't give me a JVM to run it on.

[cylab]

This is my project so far: www.keithwoodward.com/finance. It doesn't do anything except tell you if you're wrong or right.

- Use

1	<input type="radio" id="option1"/><label for="option1">caption</label>

  for your radiobuttons and checkboxes, so users can click on the text to select the option.
- Don't use <p>s for anything else than paragraphs. Use <div> instead (or <span> if if does not represent a block)
- Don't give forms the same name

The next hard thing that I have to figure out is how to display the worked solution in the web page after the user gets the answer wrong. I can't include it in the public html file or else they'll cheat by looking it up before hand, so I'm thinking I'll put the question and answers in a private html file that the public index.html file's PHP script has access to, and it will serve up the questions without the answers, then serve up the answer using AJAX after the user gets the answer wrong.

Sounds like the right solution.

That will be a pain in the butt for me to learn since the answer will have text and images and I'll have to figure out how to send images in an XMLHttpRequest.

You won't need to, just pass some html with <img> tags. If you want to secure the images from spying, look for some binary serving php, so you can check against the answer.

Final advice:
make this whole thing work completely without javascript. Let it be crude and clumsy, but provide all the building blocks with only html and some php controler script. Then use unobstrusive javascript technics (preferable with jQuery) to streamline the experience, like inlining the answer-pages via javascript. Remember KISS - if you find that you'll rewrite stuff in javascript, that already works without it, you are doing wrong. If you break the HTML/PHP version while adding javascript, you are doing it wrong. If you have to switch between the html and the javascript version, well, you are doing it wrong

Goal should be, that you only enhance a working version of your html-only app by adding a single <script type="text/javascript" src="make-it-even-better.js"></script>

See http://coding.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/

[oNyx]

>So you had to display matrix mathematics in your survey [...]

Nah. It's just a term we used internally for things where you rate a few different things on a scale from 1-5 (for example). There were the rating labels on the very top, the topics on the very left, and a radio button in every regular cell (I used JS to make the whole cell clickable).

It looks pretty much like this: http://i.imgur.com/1b2kx.png (just with readable text n stuff )

>SCORM sounds good, but there's no demo on the site [...]

It's a standard. There are a zillion different sites. But yes, it probably is total overkill. It's meant to cover anything you might possibly need for your elearning course. However, it should be fairly simple to use if you use a simple editor and a simple player. I can't recommend any though.

>The tips about error checking (ctrl+shift+j which works in Chrome too) [...]

It's even better to prevent issues beforehand. Try JSLint. I f-ing love it. It's what made JavaScript acceptable to me. (A good editor like Komodo Edit/IDE also helps a lot.)

>I can't include it in the public html file or else they'll cheat by looking it up before hand,
>so I'm thinking I'll put the question and answers in a private html file [...]

The best way to do this is to put it into the response, because that's what the intended flow is supposed to look like. You hand in your answer and then you're told which answers are (or would have been) correct.

Games published by our own members! Check 'em out!

[CommanderKeith]

- Use

1	<input type="radio" id="option1"/><label for="option1">caption</label>

  for your radiobuttons and checkboxes, so users can click on the text to select the option.
- Don't use <p>s for anything else than paragraphs. Use <div> instead (or <span> if if does not represent a block)

Great tip, much better.

- Don't give forms the same name

I'm doing that to identify the elements so that I can use javascript to find them and give them unique id tags. I'm trying to avoid the human error that will occur if I try and give every question the correct question number. I think it's logical to use javascript (or maybe I'll switch to using php on the server to do this) to allocate question numbers and other repetitive things. Instead of using the 'name' attribute, I'll use 'title' which is what jQuery seems to use for labelling similar elements for the purpose of finding them later.

The next hard thing...

Sounds like the right solution.

Cool. I'm going to use the php expat parser for this (http://www.w3schools.com/php/php_xml_parser_expat.asp).

Final advice:
make this whole thing work completely without javascript. Let it be crude and clumsy, but provide all the building blocks with only html and some php controler script. Then use unobstrusive javascript technics (preferable with jQuery) to streamline the experience, like inlining the answer-pages via javascript. Remember KISS - if you find that you'll rewrite stuff in javascript, that already works without it, you are doing wrong. If you break the HTML/PHP version while adding javascript, you are doing it wrong. If you have to switch between the html and the javascript version, well, you are doing it wrong

Goal should be, that you only enhance a working version of your html-only app by adding a single <script type="text/javascript" src="make-it-even-better.js"></script>

See http://coding.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/

But if the students don't have javascript then they won't be able to submit their marks at all since it requires the AJAX mechanism. Also, apparently only 2% or less of people have javascript disabled.
But I think you're right that my javascript is a mess. I'm thinking of migrating all of my javascript client code to php on the server. Then I can do all of the inserting of id tags, question numbers etc on the server rather than on the client using javascript. This would make it a lot easier to do the answer-insertion after the students get the answer wrong since the php script would already have the question data numbered properly.

It looks pretty much like this: http://i.imgur.com/1b2kx.png (just with readable text n stuff )

Looks nice! Once I get my tests functioning properly I'll have some questions for you about CSS and prettiness.

It's even better to prevent issues beforehand. Try JSLint. I f-ing love it. It's what made JavaScript acceptable to me. (A good editor like Komodo Edit/IDE also helps a lot.)

I'll take a look but now that I've got Netbeans working well with php, javascript, css and html I'm pretty happy.

Thanks so much for all of your tips Cylab and Onyx. Unlike the orderly java ecosystem, the web/scripting world is a mess. I would have wasted weeks going down wrong tracks without your help.

[oNyx]

Please don't use w3schools. They are not affiliated with the W3C and there are many better resources. See: http://w3fools.com/

Also, I recommend to use JSON instead of XML. It's a lot easier on both sides (PHP and JS).

http://php.net/manual/en/ref.json.php

[cylab]

Final advice:
(...)

But if the students don't have javascript then they won't be able to submit their marks at all since it requires the AJAX mechanism. Also, apparently only 2% or less of people have javascript disabled.

This advice had nothing to do with the availability of javascript, but with the design of your application. It's usually *much* simpler to restrict yourself to html and server side logic when you are designing the overall controll and data flow. This is only to get your functional use cases done. Think of it as Proof Of Concept for handling the possible requests and what data to return - just a bunch of input->processing->output use cases in the simplest form possible. You don't even have to make this a connected application - only a "get me back to the start" link on the response pages. Once you are done with it, you can override the submit functionality on the questions page and inject the answers into a div using an ajax request etc.

Also, I recommend to use JSON instead of XML. It's a lot easier on both sides (PHP and JS).

JSON is a great technology and best suited for interactions between client side applications (not only browser based) and server side data providers. But for this use case I would simply generate ready to use html snippets on the server and load them into divs using GET parameters and jQuery. Having said that, if you need a response value other than display-messages, JSON is the easiest way to get this done.

[JL235]

I wouldn't worry too much about missing JS support, especially since this is for your students. The important thing is to say that JS is required when it's disabled (using <noscript> tags), and to ensure the page doesn't look messed up. You shouldn't need JS for most layouts, especially not for anything which is shown when the page is first shown (although this depends on what your building).

The only people who tend to disable JS are those who are more technical, such as programmers, and so they can (usually) get that they will miss stuff by doing this. Plus the idea of building everything twice is overrated, and often incentives developers to make their sites a little less ajaxy (and so feel less fluid).

[Gudradain]

I recently completed a survey that were produce by the student in the management faculty at my school. (meaning that they had no skills of any sort in programming). Still they made a survey that was completely fine and look pretty much like yours CommanderKeith.

The things they used to do it is "google docs form". If I ever had to write a survey myself I guess that is the first thing I would consider. It probably limit you more than doing it from scratch but it's probably 100 times faster.

[CommanderKeith]

I had a close look at Google forms but i wanted more fine-grained control of the login process since I need the students' names and id numbers, and also my questions are already made in MS Word and it is easier to export that to html than to try to mush it into google forms, especially with math equations. Also I feel like I'm building a better service than what can be achieved with google forms.

I'm following your advice cylab and shifting most of the code to the server. So I'm having to learn php in more depth.

You're probably fed up with my whingeing, but setting up and learning php has been a nightmare compared to java. Variable scope is screwed up since I have to declare variables as global inside the function where they are used (a function is like a method), Strings are concatenated with dot instead of plus, the java style for loop syntax doesn't work, array access is unnecessarily complicated since there's no get(int i) method, to get local testing to work I had to spend the whole morning stuffing around with apache, php, mysql (xampp) and netbeans until finally i found out the secret tweak on a random forum that made the whole thing work. So after a whole day and night I've made a php script that can repeat the contents of a html file without elements tagged as answers 

[oNyx]

>array access is unnecessarily complicated since there's no get(int i)

1   2   3   4   5   6   7   8

$foo = array('a', 'b', 'c', 'd'); echo $foo[2]; // c $bar = array(    'one' => 'ichi',    'two' => 'ni' ); echo $bar['two']; // ni

Apart from those awkward arrows, it's pretty straightforward.

Games published by our own members! Check 'em out!

[Nate]

There's a setting to make globals accessible in functions with the "global" keyword. Bit "dangerous" though.

[Riven]

If you need 'globals' and want to make it explicit that you are actually using a variable as a global, just make a static field...

1   2   3   4   5   6   7   8   9   10   11   12   13   14

class Stuff {    public static $USERNAME; } Stuff::$USERNAME = 'Riven'; echo Stuff::$USERNAME; function abc() {    echo Stuff::$USERNAME; } abc();