I'm studying for the Zend PHP Certification and to help with that I
decided to create a couple of small tools to practice. My first target
was operators, specifically their precedence, because with 21 levels of
precedence it can be a bit hard to remember which ones are executed
first in a given expression.
Hence, I put together some HTML5, a bit of Javascript with jQuery, some
CSS using Twitter Bootstrap - and
voila, plind.dk/php-quiz/ was born. The
quizzes are very simple, yet I think they work quite fine in terms of
practicing the knowledge.
Order the scrambled info
The first quiz is a simple list of all the operator levels - each level
displays the operators on it. Start the quiz and the list gets scrambled
and you then have to sort it. When done you check your results.
It's fascinating to me how easy it is to create a test like this. All
you need is: your list, a button for interaction (start, stop), a bit of
help from jQuery (detaching the list elements, sorting them using
Math.random(), reattaching them, allowing for list rearrangement with
jQuery.sortable(), and of course checking the result with a loop through
the elements) and some layouting/design, which is made easy with Twitter
Bootstrap.
Scrambling the list:
items = this.list.children().css('background-color', 'transparent').detach();
items.sort(function(a, b) {
return Math.random() > 0.5 ? 1 : 0;
});
this.list.append(items);
Checking the sorted list:
this.list.children().each(function(idx, item) {
var self = $(this);
if (idx == parseInt(self.data('index'), 10) - 1) {
self.css('background-color', '#afa');
} else {
self.css('background-color', '#faa');
failed = true;
}
});
Apart from that, there's just a bit of bookkeeping for the scoreboard
and some setup - nothing else. It took less than an hour to write the
test itself - and now I have something that I can easily use to train my
memory of operator precedence.
Pick the higher precedence
The second test I wrote was as easy or easier still to make. Create two
boxes with content, user has to choose the box representing the higher
precedence. At first I set an entire operator precedence level as
content but then thought better of it and just set it to a single
operator - so you're comparing two operators against each other. They
will always be of different precedence which makes it slightly easier -
but also means I don't have to do extra checks on associativity.
The javascript for setting up the test and for checking it is slightly
more complex than for the first test. Setup:
var a = Math.floor(Math.random() * 20),
b,
temp;
do {
b = Math.floor(Math.random() * 20);
} while (a == b);
temp = this.operators[a].split(/, /);
temp = temp.length > 1 ? temp[Math.floor(Math.random() * temp.length)] : temp[0];
this.test_a.html(temp)
.attr('data-index', a);
temp = this.operators[b].split(/, /);
temp = temp.length > 1 ? temp[Math.floor(Math.random() * temp.length)] : temp[0];
this.test_b.html(temp)
.attr('data-index', b);
this.current_winner = a < b ? a : b;
The code for checking the result:
window.setTimeout(function() {
that.reset();
}, 1500);
if (parseInt(element.attr('data-index'), 10) == this.current_winner) {
element.css('background-color', '#afa');
this.times_correct++;
} else {
element.css('background-color', '#faa');
if (element.prop('id') == 'test_a') {
this.test_b.css('background-color', '#afa');
} else {
this.test_a.css('background-color', '#afa');
}
}
As should be very obvious, there's really very little involved in making
this. Yet at the same time it's a dynamic quiz: I can keep going over it
and I won't know in advance exactly what I will be asked. In that sense
it works a whole lot better than a static multiple-choice quiz.
Calculate the expression
The latest test I've put in place so far is about reasoning through an
expression with different operators. The code for it is again more
complex - this time mainly because sticking an expression together that
is valid is more problematic than comparing different operator
precedence levels.
Putting together the expression looks like:
setCalculation: function() {
var limit = this.operator_limit,
operator,
last_operator,
expression = Math.floor(Math.random() * 10),
last_seen_unary,
use_ternary = false,
can_use_non_ranged_comparison = true,
can_use_ranged_comparison = true,
operators = operator_test_module.expression_generator_operators;
while (limit) {
operator = operators[Math.floor(Math.random() * operators.length)];
if (!this.use_bool && operator_test_module.isBool(operator)) {
continue;
}
if (last_operator && operator_test_module.isNonAssociative(last_operator) && operator_test_module.isNonAssociative(operator)) {
continue;
}
if (operator_test_module.isUnary(operator)) {
last_seen_unary = operator;
continue;
}
if (operator === '? :') {
use_ternary = true;
continue;
}
if (operator_test_module.isNonRangedComparison(operator)) {
if (!can_use_non_ranged_comparison) {
continue;
} else {
can_use_non_ranged_comparison = false;
}
} else if (operator_test_module.isRangedComparison(operator)) {
if (!can_use_ranged_comparison) {
continue;
} else {
can_use_ranged_comparison = false;
}
}
expression += ' ' + operator + ' ';
if (last_seen_unary) {
expression += last_seen_unary + ' ';
last_seen_unary = null;
}
expression += Math.floor(Math.random() * 10);
limit--;
}
this.current_expression = expression;
this.expression.text(this.current_expression);
},
Problem one is that some of the operators don't play well together - you
can only have one ranged comparison operator in an expression, and only
one non-ranged comparison operator. Also, sticking binary operators in
an expression is easy - just put one between literals. But you also need
unary operators which should be prefixed to the literals. Then,
obviously, there's the ternary operator - which is not yet part of the
above code, mainly because of the added complexity.
Checking it is yet again another story. You could likely piece together
an equivalent expression for javascript, using parentheses to get the
correct precedence. That, however, is way too much work, when you can
just send the expression to a php script and have it evaluated against
the answer given. This, of course, results in a security problem: you
need to make sure that only proper expressions can be sent to the
testing script. And that was what led to this regex:
#^\\d+ ( |< |<= |>= |> |== |=== |!= |!== |<> |\\* |/ |% |\\+ |- |<< |>> |& |\\^ |\\| |&& |\\|\\| |and |xor |or |~ |\\(bool\\) |\\(int\\) |\\(string\\) |\\(float\\) |\\(unset\\) |! |\\d+)+$#
It essentially tests for the various possible operators and number
literals - with no other input excepted, to make sure the eval()
function of php is not exploited.
After testing the expression generator a bit, I also realized you need
to be able to modify the expressions. There are two main factors: length
and operator type. Obviously, longer expressions become harder to
follow, however, the longer the expression the bigger the chance you'll
see and 'and', 'or' or 'xor' expression in there - and since they run
last, the result will be one of true or false. In fact, with a length of
5 literals, more than half the expressions evaluate to true or false -
and in the long run, it's just not as interesting to just guess at true
or false, as it is to see if you can follow the operators.
Conclusion
Writing these tests provide pretty awesome experience in and of itself.
While I knew the operators before as well, they're a lot closer to heart
(and memory) now. Also, it's really interesting to try out your skills
at something so easy yet rewarding - you see quickly how it's possible
to make something of value. It's one of the things I'm often missing
from my language learning experiences: proper projects to make.