Agreed. We already have one property for outer padding, the margin, we don’t need two. So it’s much more useful if padding works inside width/height then outside. Working around this model is also much easier then working around the default model.
The key point is that it can be used in conjunction with percentage dimensions. Additionally, you don’t have to do the math yourself if you’re using fixed sizes.
So yea, Microsoft did have the right idea here.
By the way, this wasn’t the first nor the last time that specs were incorrectly interpreted, because that incorrect interpretation sounds saner (i.e. more useful).
Personally, I still think the current box model was a mistake. It’s very inconvenient and very limited. Fortunately we now do have a choice. If we don’t need to support anything below IE8, that is.
I find just not doing any fecking websites at all extremely satisfying. 
Oh, that Box-Sizing article is new to me. Haven’t knew there is a switch like that.
Actually I tried allways to go with: size = width | height + padding + border. Except for rare cases like mixing relativ/absolut block/inline elements together that worked pretty fine.
I’m going to be honest, I don’t like JavaScript, it isn’t my type of language, but I’m forced to use it. I love how easy it is to set up a small script of 10-20 lines of code, but I really hate writing big applications with it. I really hope Google’s Dart(http://dartr.com/) takes off. They made some very valid points in their explanation for creating the language. I got a chance to play around with it, and I much prefer the syntax. Right now, it compiles right into JS, but Google wants to strive for this language on browsers, as well as the server.
I also hate javascript, HTML, CSS, PHP and friends. I’ve been learning it over the last 5 days to try and make online multi-choice exam questions for my students and it’s been frustrating.
There are 8 reasons why i hate it so far:
- 1 No predictive text insertion in Netbeans or eclipse AFAIK. In java i can type a variable and then press ‘.’ and the IDE will show all of its fields and methods. Not so when using javascript, i guess because it is not strongly typed.
- 2 No exceptions and javascript just silently fails when there’s an error. I think I need fire bug to solve that, but why can’t the IDE just catch it?
- 3 To do anything useful on the web I need to learn 5 different languages: HTML, javascript, PHP, CSS and SQL with all of their little ridiculous peculiarites. These range from different ways to declare variables (var vs $) to different ways to doing comments (// vs /* */ vs ).
- 4 No definitive javadoc equivalent, I have to search random crap on google to find answers and ways of doing things.
- 5 The ‘DOM tree’ is silly. It doesn’t make sense that everything is a node, including attributes, yet attributes are not children of the nodes that they belong to and they have no parent. In that case attributes shouldn’t be nodes!
- 6 All the browsers have different ways of doing things.
- 7 The crazy mixture of manipulating the DOM with text using element.innerHTML=“stuff” vs doing it using DOM nodes, which are supposed to give the same result but often don’t.
- 8 Trial and error lucky dip approach of programming in javascript where anything may or may not work and it’s not clear why.
I’ve been meaning to give GWT a go since it’s supposed to fix some of those issues, but that means learning yet another API that may or may not actually help
Some “help”:
- Code-Completion works in Netbeans with .js files, but not so great in embedded scripts (which should banned anyway - google “unobstrusive javascript”). Don’t know about Eclipse - best JS-Support is in Intellij Idea.
- You can install a JS-Debugger based on Firebug with Netbeans
5-7) To ease this pain, I recommend jQuery
Try Visual Studio, this does have auto-completion.
Yes it does. With IE 6 (and some other IE versions) the error was shown to the user, and this meant if you went to a broken page, you would receive half a dozen script error dialogues. Due to the annoyance of this, errors are hidden from users, until shown.
In Firefox you can see errors using the error console (ctrl+shift+J), or through Firebug (right click, inspect). Chrome, IE, Opera and Safari all have equivalents for displaying thrown errors in one form or another, and include their own DOM navigators and debuggers. You can also get Firebug Lite for non-Firefox browsers.
You can use JavaScript server side too, and you could take a look at Ruby which is much nicer to write than PHP.
Tbh any real web development rarely uses lots of SQL directly, as it’s pretty common to use an ORM. There are plenty around, and I even wrote my own over about 2 days so I could avoid SQL in PHP.
HTML/CSS vs pages of Java just comes down to personal taste.
Check out the Mozilla reference or the MSDN. I also find Quirksmode useful for looking up compatibility, although it’s often only accurate on popular stuff.
The specs are also online, which state the objects, attributes and methods that different standards support. Some of these are massive, and go into lots of detail, but some like the one for the Canvas element, are invaluable.
I presume you are talking about ‘setAttributeNode’ and ‘getAttributeNode’? They are rarely used, and I didn’t know they existed until you mentioned them. Try ‘getAttribute’ and ‘setAttribute’ instead. Attributes aren’t nodes, they are key-values stored on the DOM nodes, it just happens that those two methods give a ‘node-like’ interface.
However it’s common for only library writers to work directly on the DOM. Everyone else just uses jQuery (or similar).
[quote=“CommanderKeith,post:146,topic:37455”]
Use jQuery.
Again, use jQuery.
Check your errors. Even when you just get a browser specific error code, it’s often enough to be able to look up the issue.
I hope that helps!
Thanks cylab and jl235, much appreciated. I’ll try your recommendations. Yes I was using embedded script so i’ll change that first thing.
Jquery seemed like bloat so avoided it but I’ll have a closer look now.
Oh boy. That’s quite the project. I actually did something similar last week. It was a survey with several pages, additional questions which are shown if you select specific answers, 14-15 languages, matrix questions, radio buttons, checkboxes, textareas, optional stuff, nagging if required stuff wasn’t filled in, and things like that.
Pretty complicated, really.
I used a data-driven approach, client-sided templating (with inline templates), and event delegation. I used jQuery as base lib and underscore’s template engine (I’d use Handlebars or plain Mustache nowadays).
This really isn’t something a beginner could have pulled off. Also, someone was willing to pay about 5000€ for that. It really was quite a bit of work which required quite a bit of experience.
Well, take a look at SCORM. It’s some kind of elearning standard. There are tools for creating those SCORM files and there are also players which display them. This might be exactly what you want.
[quote=“CommanderKeith,post:149,topic:37455”]
jQuery is bloat. However, it makes DOM manipulation/transversal, events, effects, and ajax a lot easier. You’ll need very little code for all these things. It also takes care of compatibility issues (aka “browser normalization”).
In most cases, it’s totally worth those ~33kb (1.7.1, minified, gzipped).
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.
- Use
<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
s for anything else than paragraphs. Use
instead (or if if does not represent a block) - Don’t give forms the same name
Sounds like the right solution.
You won’t need to, just pass some html with 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
See http://coding.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/
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.
Great tip, much better.
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.
Cool. I’m going to use the php expat parser for this (http://www.w3schools.com/php/php_xml_parser_expat.asp).
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.
Looks nice! Once I get my tests functioning properly I’ll have some questions for you about CSS and prettiness.
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.
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).
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.
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.
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 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).
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.
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 :clue:
array access is unnecessarily complicated since there’s no get(int i)
$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.