Your own task site in 30 minutes – and completely free :)
For example, you are a teacher and want to make a website for your class or school where students solve programming problems – or maybe mathematics or physics.
Or maybe you are recruiting interns for the company – for the position of junior developer or tester – or for internal courses – it would not hurt to be able to hold a mini-competition – to filter out more motivated candidates. (of course, you need to be careful with fans of AI code generation, but this is a separate topic) Can also be used for live-coding sessions at interviews.
It's easy! You can deploy a ready-made open source website (my creation) on free PHP hosting in one sitting. Depending on your needs, this can last for years. I'll talk about the main features and disadvantages – and briefly explain how to download, how to deploy, how to customize – so you can decide whether this thing is suitable for your purposes.
Background
Website CodeAbbey originated a long time ago in 2013. It is mainly dedicated to puzzles and small programming challenges. However, it works a little differently from the usual sites for Olympiad problems, LeetCode, etc. Most problems generate randomized input data – and the user must write code to calculate the answer – and send that answer. This is similar to how the Facebook/Meta Hackercup selection process works for example. The code (usually) is not executed, so you can write it in any language – and the site owner does not need (not necessarily) to worry about servers to run it. Strictly speaking, the “Olympiad” approach is also possible, but it requires a little more effort. I won’t talk about this in the article (at least for now) – but if necessary, you can always ask – I’ll explain!
A few months ago the site went to OpenSource – that is, its code is now available on github – thanks to which anyone can reuse it. It’s not that it was a pity before, it’s just that bringing a project to open source turns out to be quite tedious and painstaking work (if this was not intended initially) – it was just scary to undertake.
The interface is English – but if you change the words in the page templates to Russian or something else, nothing will break 🙂 Unfortunately, we didn’t get around to full localization (or rather, there was no need) – although translation of tasks is supported.
Site features
By default, we have a simple login with a password; the email must be specified, but it is not checked (it is only used to recover the password).
To register, you need to fill in the top two fields and the bottom two.
The main site additionally uses registration via GitHub or Google – but such things are not yet included in the open source code – however, again, I’m always ready to advise – although it’s not difficult to arrange a login through Telegram.
After logging in, the user is taken to the tasks page
Categorization is available here – more precisely, it is filtering by tags – you can divide tasks into levels of complexity or, for example, semantically – puzzles, popular algorithms, etc. The site administrator also has access to the button for creating a new task 🙂
The numbers show how many participants solved this or that problem and, based on this, what is the current “value” of this or that task. This allows you to rank participants according to the amount of points for the tasks they solve. Here is the rating page:
As you can see, here you can filter by country or programming language. However, let's go back a step and be curious – what does the interface for creating or editing a task look like for an administrator?
Everything here is a little unsightly – but in general it’s clear – fill in the name of the task, the URL is generated from it but can be corrected. The task description is in Markdown, and the input data and expected result generator is in PHP. In general, other languages are also possible – if your hosting supports them.
Some problems may have more than one solution – in this case the function checker(...) Instead of generating a ready-made answer, it can leave a note so that when checking, it will be called again and it will parse the answer and decide whether it is correct or not. In general, there are quite a lot of possibilities, but for the first acquaintance we will not overload the brain 🙂
How does the user see the task? This is perhaps one of the most functionality-laden pages:
In general, everything is clear – at the top there is a condition, tags, links to translations of the task (if any). Next are two blocks – with test data (they are different each time) – and for entering the answer.
Even lower there is a field for editing the problem code – you can solve the problem right here. If “launchers” for some languages are connected, the user will be able to automatically process the input data and fill in the response field. By default, at least a button for executing JavaScript code is available – because… it does not require a sandbox server – the code is executed by the user's browser itself. Similarly, you can connect languages that are compiled or executed in JS – there is an implementation for Python, Lua, Scheme, for example. More complex ones – for example C++ and Java – require a sandbox for them – but this is only if you want to provide the user with a launcher.
So, in any language, you can solve the problem by copying the data to your console – and copying the response from the console back. Thanks to this, for example, solutions appear on the main website in completely outlandish languages - from archaic to the latest.
Other options – let's list them briefly so as not to get boring – there is a built-in forum where users can complain about life, suggest tasks, report bugs or write something about themselves. There is a section of pages (we call them wiki) on which you can write all sorts of instructions, notes, etc.
You can create Competitions – problems for which the answer is not “binary” – solved or not – but also has some assessment – and you can see who solved it worse, who solved it better. This is relevant for larger problems that usually do not have a clear solution algorithm (like the traveling salesman problem – or an exercise in writing the shortest code, for example, in assembler for Intel-4004 or BrainFac).
What about physics/mathematics problems?
It depends on how you want to see these tasks. If they have input data and the expected (numerical) answer set in the same way, then no additional actions are required. They can also be (and usefully) randomized – but in general we have all seen this.
We might want to create problems where the answer is a formula rather than a number. I created this version using a simple expression interpreter connected to the source code. You can see what happened on the demo project Alferov's Peace – it is also open source and there you can see how it is connected – or reuse it entirely.
What about deployment?
The site was originally made so that it could be maintained at a “minimal price” – and how much more minimal than free? 🙂
This ideology has survived to this day – and without much damage to functionality. The main site is hosted on inexpensive paid hosting (plus a tiny VPS for sandboxing) – but this is absolutely not necessary. For the needs of a school or company, you can easily use free hosting – almost everything will work.
What are the restrictions? Free hosting does not always have HTTPS, for example. They usually do not have the ability to make outgoing requests (therefore, neither sandboxing nor login via oauth will work – and therefore their functionality has not yet been transferred to open source code). Most likely this is not a disaster (for example, you can most likely arrange a login through a telegram bot anyway).
There is a demo video on the project page on Github that shows the entire deployment path to awardspace.com – this is hosting that does not require complicated registration – and besides, we have been using it for some purposes (interactive tasks) for years – without problems.
One of the nuances of deployment is that you need to use Filezilla or SFTP to upload all the files at once and not poke around individually.
Many elements of the site are immediately configured in the customization file – so you can largely give it “your own look” without touching anything in the code. Well, of course, it’s also not forbidden to get into the code. A little more about this below.
Where is the project code 🙂
Yes, of course, on Github: https://github.com/codeabbey/src
This may be the most important point – for those who want to change something in the code – and therefore understand it. I added the files “step by step”, relatively speaking, by parts of the functionality. Each of these steps is formatted as a separate branch – thanks to which you can see what is added at each step (there are corresponding explanations there in README.md) – and how it all works.
As an example, one of the site users, who a year ago knew nothing but VBA, was not too lazy to study PHP a little and, with a few tips, launched his own site https://the-athenaion.com/ – mainly with programming problems in the fields of mathematics, geometry and statistics.
In general, if this is useful to someone, I will be happy to answer questions, help, add this or that forgotten functionality to the open source code – ask, complain, suggest 🙂
