School Career Day Project (Learning Material)

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.

Set It Up

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:

1. An editor (an Integrated Development Environment, or IDE)
2. A web server
3. Some source code in the form of JavaScript (jQuery), CSS and HTML

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:

1. Unzip the Website.zip (attached) to a location on your C: drive.
2. Install VS Code from this location.
3. Run VS Code.
4. Click on the Extensions icon (please see the picture below, which shows a red arrow to the Extensions icon).

5. Then in the search box, enter “IIS Express”. Locate it in the filtered list and install it. (See the image below—the red arrow indicates the installed extension.)

6. In VS Code, click File > Open and select the folder where you unzipped the Website folder.
7. Trust the Authors if the message appears.
8. See in the last image the Start Website button. Please click this, and your site should load in your default browser on a port. What I mean by on a port is the site is run as a website as opposed to loading the file from the C: drive.
9. You can now operate the site. Click the Page buttons at the top, which are menus. You can operate the dropdown on Page 2 to load the grids.

Play Around

With the website loaded, you can try our some interactions. Here are some ideas:

• If, when operating the site, you notice that the grids are off the screen, modify 680 in page1.html to be 500 or so. This is down to time constraints. Normally the grid can be made to calculate the height dynamically.
• If you notice an odd character in the grid like an “A” before currency, then move the “culture” and “message” CDNs in the head tag to just below the jQuery line in each page including index.html.
• You can find the head tag by using Ctrl + F and typing “head”. You can also look for culture and message in a similar way. Know your Integrated Development Environment (IDE).
• Open the js/data.js file and modify any of the data values. See how this affects the grid.
• Note: Unpredictable results can occur when syntax is not correct. Make sure string literals are only changed within the quotes.
• The oDataChooser will stop functioning properly if you modify the ID values. See line 44 on page1.html for an occurrence of its usage if you choose different values. Change the usage areas also.
• Modify string literals like names to suit your preferences.
• Add more data in the oPeople var of js/data.js.
• I have deleted (commented out) Page 2. Re-add this page by removing the <!-- --> 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.

Project Synopsis and Nuances

1. I have taken index.html below as the page to disseminate.
2. Note class=“max” 100% height and 100% width on html, head, body and div. This causes the page to take on the maximum height and width of the browser. This makes the splitter resize correctly the page into a header, middle and footer, keeping consistency between pages.
3. 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.
4. The 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.
5. I found that without the timeout for 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>

To Sum Up

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.