Development issues with Black Box website

For the most part the development of this website for the EdCom module in my third year has gone reasonably well.  The layouts that I have created work the way I had intend.  The graphics I have used are clear and the images I created are clear enough for the purpose.

I took the photographs myself using a Kodak Z100 digital camera.  The saved images were then edited using Adobe Photoshop.  I did this to remove the backgrounds and to make the images appear to float within the webpages.  Some of the images were cropped so that I could identify certain features of the motherboard used for this project.  The images which have a hover mouse over feature (where you hold the pointer over an image and text is displayed) were developed using Adobe Fireworks.  Image maps were drawn and tagged.  Then a script was used that placed a bright yellow pop-up with black bold text on the screen when the mouse is held over a component.  I felt that this made a useful clear interaction and feedback of the user navigating the features of the motherboard.  This method was then repeated on other components within the website, so that as the user moves through the site discovering the various components in a desktop PC case they could better identify what they were viewing.

Image of the motherboard with pop-up message displayed
Image of the motherboard with pop-up message displayed

One area of the site that is troubling me at the moment is the quiz that I have created using JavaScript.  When the user refreshes the page or reloads the quiz the question presented changes together with the image being displayed.  However the radio buttons that are dynamically generated display on the screen with the button “checked“.  I have tried various different combinations of script but at this time I do not seem able to have the page refresh or reload a new question without the checked radio button appearing.  This is sometimes an issue as the feature has a randomize function the check mark actually appears next to the correct answer.  This does not happen on every refresh but it is an element that I would like to fix for the future.

Image showing radio buttons in Revision Quiz
Image showing radio buttons in Revision Quiz

I decided to use plain text and clear backgrounds to begin the development of this site, purely to get the prototype up and running.  The site has been developed using Cascading Style Sheets.  This allows for simple changes to be made site wide or on a specific PHP page.  By deploying the HTML within PHP I have been able to maintain a theme across the site without large amounts of recoding.

Screenshot of the home page
The home page

By the submission date of 9th January 2012 I will have added a link to ATBar.  ATBar is a tool that developers can use to improve the accessibility of a website.  I have had a look at the tool and used it to test within Internet Explorer, but I have yet to try to use the Kit that is available which allows a developer to embed the tool within a website.  I hope to test this functionality later this week, and if successful implement it within the project.  When testing in Internet Explorer it allowed me to change the size of the text displayed and also magnify the entire page to make reading easier.

Dissertations without fear –ASK session

Had an absolutely fantastic session today, discussing dissertations with a professional. Sarah Treloar from the University of Portsmouth ASDAC unit who is completing her third dissertation at the moment (my reason for saying she is a professional), led the session in the Library. She showed great skill in learning and remembering the names of 24 students, for her first feet of brilliance. Then she moved on to the meaty stuff of explaining how to break the dissertation down into smaller chunks.

The steps to take

Finding a topic

  • Read around your subject
  • Find a topic with a lot of issues
  • Something with plenty of literature on it

Collecting data

  • Primary
  • Secondary


Writing up

So what’s involved?

Thinking about Primary Research:

  • Collection of data
  • Methodology
    • How and why you choose that method of analysis
    • Reliability of the data and method of collection
    • Justify your choice

So what do lecturers look for in a good dissertation?

  • Flow of writing
  • Good structure – primary focus at the start – get it right and fit the project into the sections
  • Fluently written work
  • Evidence of research
  • Attempt to prove a point – use an argument – have something to persuade your reader of
  • Addressing bias

Things that lose you marks: (spoils the whole thing in her experience)

  • Too much description
  • Poor spelling
  • Referencing errors
  • Grammatical errors
  • Over use of direct quotes
  • Don’t analyse in the results section

When you begin reading it’s a good idea to find other dissertations and see how the author created the structure of the project. You can also get ideas for sources in the work that you had not thought of and this leads to better reading around the topic.

Another top tip is to plan your work in advance. Use a Gantt chart to analyse the tasks that need to be completed in order to do the dissertation. Make a list of everything you need to do, then add to this list all the other things that happen during this period, such as other projects, lectures, part-time work and union responsibilities if you have them.

Micro tasking

Read 5 articles on your topic

Find 5 articles on a topic

Analyse 5 articles for

  • Validity of the topic
  • Indications of application of the topic
  • Write the notes for the topic (don’t forget to include references and page numbers so you can refer to them later)

The writing process

We worked in groups to produce a pie-chart which indicated the amount of time we thought would be needed to complete the following tasks.

  1. Analysis (find a question)
  2. Research
  • Reading
  • Notes
  • Gathering Data
  1. Planning
  2. Draft writing and editing
  3. Proof reading

The group I worked in found that:

Sarah made a point that none of us ever allow enough time for proof reading and you should never get another student to read your work as they are busy and will miss something.

It’s a good idea to use the following method:

Repeat this until you are happy with your work and it doesn’t contain errors. Make sure it flows and use the list above, ‘What the lecturers look for’ as a guide.


Know what is expected of you

  • Lecturer
  • Dissertations
  • Handbooks

Be Organised !!

  • Manage your time well – do this and you will do well
  • Break the whole thing down into small segments
  • Know what each element contains and tick it off as you go

Remember allow plenty of time for

  • Drafting and Editing
  • Proof reading
    • Marks are available in this area if you make the time

EDCOM Website Design Update 5/12/2011


For this project the intended audience is 11-16 year olds studying ICT in a secondary school.  Their focus will be in learning the history of computing and also how the components work together to make a computer.  A basic technical knowledge will be explained so that students can recognise a part and understand its purpose.

The resources in this site will be constructed to give enough information for all learning abilities.  Where descriptions of components are used, the first paragraph should be adequate for all learners and the rest of the text in each section will expand the knowledge of a particular part for those working at a more advanced level.


The purpose of this site is to give an understanding of the internal components of a desktop computer and to teach students what each part does and its relevance.  The detail will be sufficient to give students the ability to recognise the various parts and to explain how the device works within the computer.

The Images

Copyright will not be required for the images used in this site as they will be photos from the author’s library.  The images in the story board have been created within Microsoft Visio.  Initially they were hand drawn on squared paper (see appendices) and then adapted for this document and the design process.

The Text

Where relevant, blocks of text will be referenced so that proper attribution is included within the website.  The use of plain text with a moderate font size will allow users with sight deficiencies to enlarge the text via their browser or other accessibility tool.

The Videos

Videos will be linked to from this site so that no copyright infringement takes place.  Each of the videos will carry a brief explanation and categories will be used to identify the different types of video.  For example a section ‘Just for Fun’ will be used to show time-lapse videos of dis-assembly and assembly of a desktop computer.

The Revision Quiz

This quiz uses a randomized function in JavaScript to generate a quiz question for the user.  The question will contain images which having worked through the site the user should be able to identify.  Using radio buttons to select the answer, then using the ‘check answer’ button provided the user gets instant feedback to help with the learning experience.  The next question is selected using the ‘next question’ button provided.  The user can leave this revision quiz at any time and return later to try again.

The Test

This is constructed using an image of a motherboard which has been numbered and a Google Form embedded in an iFrame.  The idea is to insert the correct name for each part or select the correct part from a list with radio buttons.  At the end of the test a link should be provided to the results.  The test will be graded using a spread sheet in Google Documents with a script called Flubaroo (suggested in a post by Mark Anderson), which automatically grades the tests as they are submitted.  It requires the first set of tests submitted to be the correct answers then it calculates the rest of the submissions based on this.

The Glossary

The glossary uses hidden Div’s inside the php pages to give the appearance of a clear page until the first character of the device name is clicked in the menu bar which spans the top of this section.  Clicking on each character opens up the contents for this section and clicking again closes the content.  Inside the glossary contains explanations of acronyms used across the site and brief details of each component.

Black Box Website Initial Plan

Website design taken from MS Visio
Initial Website Design from MS Visio


website design story boards 1-3
website design story boards 1-3
website storyboards 4-6
website storyboards 4-6
website storyboard 7
website storyboard 7

Project Evaluation to follow.  Please leave your comments.

Videos I would not use for my target audience

These videos while very informative and well made are above the level of most students aged 11-16 years.  They are more suited to ‘A’ level and Degree level revision of Computing.

Colossus Part 1  A video about the Colossus machine which has been rebuilt and is housed in Bletchley Park, Milton Keynes.  It was used in the code breaking during the Second World War.

Colossus Part 2 The second in the series about Colossus.

More useful sites for learning about computers – History

The sites in this section are mostly about the history of computing and provide good background material for general understanding.  The videos are suitable for 11 to 16 year olds with an interest in computing.

Alan Turing considered to be one of the fore fathers of computing.  This video is a brief biography of Turing’s work and his life.  It also looks at the Enigma Machine and Turing’s answer to it the Bombe’.  It also introduces the idea of artificial Intelligence.

The Bombe’ Part 1.  A history video about Bletchley Park and the Machine used to decode the Enigma Codes.

The Bombe’ Part 2. The second part of the history of Bletchley Park and the Bombe’ showing the machine running and the presenter using the Enigma machine.