What better way for students to learn about programming than to play around in code? Check out this resource!
I was approached on LinkedIn to help a school with their Career Day. I stepped up to the plate and said I would make a portable project that the students could interact with to provide a relatively real-world scenario of how it is to be a programmer.
I’m going to share the files with you, here, as well as outline some optional activities a student can experiment with to build on any programming experience they may already have. Please try these out yourself, then add to them or make into a lesson for a classroom of curious students.
The brief I gave myself was to create an environment for a web project that would run on a Windows machine in as self contained a way as possible.
We would need:
I chose the Windows version of Microsoft’s Visual Studio Code as the IDE, which contains a plugin for a web server so we had 1 and 2 covered. I just needed to create the source code, which you can download here.
The following is how we suggest setting up the environment and using the code:
With the website loaded, you can try our some interactions. Here are some ideas:
oPeople
var of js/data.js.<!-- -->
comment from the includes/menu.html file. See how this affects the program.Note, some people in IT say that there are no mistakes in IT. This is because we can always fix them. (This might be more relevant to software. Hardware takes a bit longer sometimes because you have to source the hardware.) I am one of these people. Just make sure no accident from an IT glitch should cause a human harm. Those that oversee the techies and programmers should invest correctly in software resources for them to perform their job correctly.
NJQ_FetchHtml()
—This has a prefix NJQ, for No jQuery. It can be called without jQuery having been loaded. It “fixes” up the html inserts which have the attribute “html-include”. The function resides in /js/NojQuery.js
and is essentially a way of cycling through the html tags looking for “include-html” attribute and inserting the relevant include into the page at the relevant position.Every()
routine in the document ready runs in each page, setting up the splitters and running other functions for each page. The functions in Every()
require jQuery to be loaded.ulMenu
the program did not function correctly. This is because the NJQ_Every()
is still functioning and the menu runs on the injected html. Document ready does not function in the includes
because the system does not “run” the injected code. A timeout allows time for the injection to occur so ulMenu
can be found in the jQuery.index.html
<html class="max">
<head class="max">
<title>Sprowston High</title>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<script src="js/NojQuery.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.highcontrast.min.css" />
<link href="css/css.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/cultures/kendo.culture.en-GB.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/messages/kendo.messages.en-GB.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/kendo.all.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body class="max" page-name="Index">
<div id="divSplitter" class="max">
<div id="divTopPane">
<div include-html="includes/menu.html">
</div>
</div>
<div id="divMiddlePane">
</div>
<div id="divBottomPane">
<div include-html="includes/copyright.html">
</div>
</div>
</div>
<script>
NJQ_FetchHtml();
$(document).ready(function () {
setTimeout(function() {
NJQ_Every();
Every();
setTimeout(function() {
$("#ulMenu").kendoMenu();
}, 1000);
}, 1000);
});
</script>
</body>
</html>
This project can be rolled out over a school network, allowing the students to interact with the presenter and learn how easy and fun it is to change stuff to make the computer do different things.
The enjoyment in the making of the project was multiplied by the option to turn it into a blog. I find that the experience gained has made my abilities with a computer more valuable as a result of me working with you today. I appreciate this and would hope the feeling is mutual.
I hope it is a good read and that you enjoyed trying the project out.
Contact me, David Robertson (https://www.dar-jader.com) at david@dar-jader.com to find out more.
David Robertson is a software developer/computer scientist, with degrees and many years’ experience working and writing in the field. He also enjoys ethos and philosophical discussions about computing—where he sees it going and the journey so far. He believes in balance within the tech industry and supports it at every juncture, supporting and advocating for good mental health as a way forward for reasonable and reasoned programming.