Development issues with Black Box website

Personal views and experiences

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.

4 Responses

  1. Tony Skinner says:

    Some very good progress so far. I’m interested in seeing what ATBar is all about. I like how you’ve clearly distinguished the hover over text from the rest of the image map, in my opinion I really do not think there is any other way to make it clear to the learner. The colour scheme that you have chosen also makes it very visible and the content is succinct, I’m very much looking forward to seeing your site should you chose to make it live of course.

    If you’re having issues with the game and they are not fixable in terms of the time scale between now and the hand in, you may wish to check out This site has a variety of games that are available, the only trouble is you cannot embed them into your site.

Leave a Reply

Your email address will not be published. Required fields are marked *