Response to the Brief

I made my website interactive because the website is targeted at teenagers.In order to create an informative website targeted mainly at teenagers. Teenagers love to discover new information and share it. Teenagers mainly use internet to get and share information, they love to feel in control and interact with the information/website. As we are all aware, the youth are very active at the moment to rise up against climate change.

I researched about Universal Design and Universal Experience. I learned that the best experience is delivered on a website through a clear, visible and comprehensible webpage, regardless of the user's ability, disability, age or size and other characteristics. Surely, users would like to use a visually pleasing and comprehensible product. We also learned that we need consistency on our webpage. If huge differences are made between webpages, it is not easily understandable and is probably frustrating for the user. I think the most important aspect is that the user feels in charge and comfortable. Application of this universal design principles minimizes the need for assistive technology.It creates products, systems, and environments to be as usable as possible by as many people as possible irrespective of external factors.

Features of a good website

• Visibility-Clearly users will want to use a visually pleasing and comprehensible product. Even if an app, say, is very good and well functioning. The user will probably judge a book by its cover.
• Relevant- have minimum relevant information
• Another one is consistency. If huge differences are made, it is not easily understandable and is probably frustrating.
• I think the most important aspect is that the user feels incharge.
• Interactive

Design and Development

Iterative Design

In the first section, I used python to clean my file and create a graph. Initially I was going to clean my csv file of oil production data by reading it into another file and (importing re) sub the unnecessary parts of the file with “”. However, while I was researching the most apt way to clean a large file with data of several countries I figured that pandas was the most handy. Using pandas, I made a dataFrame; I split the country, years, and percentage amount and other parts as columns and deleted the useless columns.

Then I realised that I should split the dataset according to the countries. At first, I was going to use numpy and split_array. But I did not know how to split the dataFrame into 5 equal parts because I usually split lists. But when I looked into pandas I realised I could use pandas to divide the dataFrame equally. I split the file into 5 lists according to the countries and saved them into named lists where I could easily plot it.

Using matplotlib I graphed the details of the 5 countries; the oil production per year from 1975 until 2015.Then I downloaded a second csv file with data about electricity production from coal and cleaned and graphed it similarly. I chose coal because whilst researching the energy production of the countries I had chosen, most of statistics included coal.

Then I moved onto my website. I created a form with 3 questions, 2 multiple choice questions and a thought provoking question for users to leave a response. Initially I used radio buttons for the mcq.

Then I looked into how to save radio button answers to a sqlite database as I had not done that before and it was suggested that I should use PHP that easily allows details from a form to be saved into a database. Considering I had not used PHP before, I changed the radio buttons to a drop down menu, therefore I used boolean(true or false). I was unsure how to transfer the information to sqlite database so,I changed the layout of the form so that the responses were submitted via button. I ran into some difficulty with submitting a response from the button as before I was using the button to give a response whereas the button was a response. I tried various different methods to submit a response to the database like an input bar, a radio button and a drop down menu but I was most familiar sending responses via button so I resorted back to it. I realised that in client.js I was looking for a value in the button in my code so I changed that so the value was “Yes” and was able to insert into the database. I also thought about server.js, if I could use the 1 put data function to insert the two responses into the database which I could not so I used two similar functions instead.

When I could transfer information from my form to my sqlite database, I moved onto the next part of my website.I looked into how to plot on js using plotly and a data from sqlite database.

I tried to add the elements in my database to a list and split that javascript array into two, one being a yes list and the other being a no list. However, I realised it would be easier to insert the yes responses into a seperate table in the database and no responses into a no table so I varied my database a bit. In this way, it was easier to make two lists which could then be used to plot against each other. Using the server side javascript I retrieved all the data in the sqlite database. Using the client side javascript, with the function forEach(), I added all the data in the database to a list (both for yes responses into a yes list and no responses into a no list).

Using plotly, I graphed lists against each other.

Computational Thinking

I created a flowchart representing my idea.

I ran into difficulty trying to find data for my initial idea, however during research I found an interesting database and decided to analyze it in my project. I found my data set on a website and downloaded it as a csv file. First, I decomposed my project. In the first section, I used python to clean my file and create a graph. I used pandas to divide the dataFrame equally. I split the file into 5 lists according to the countries and saved them into named lists where I could easily plot it. Using matplotlib I graphed the 5 countries. Using the .to_csv function (imported from pandas), I put the cleaned data into a new csv file.

Then I moved onto the next section of my project. I made a brief plan for my website; breaking them down into smaller parts.

Plan for Website.

• Use glitch
• Using graphs made in python have information about these 5 countries' changes in electricity production.
• Have a survey (mcq) and opinions to be viewed as a pie chart
• Each quiz result to be fed into an SQLite database and retrieved for chart
• Hopefully, plot pie chart using plotly and javascript
• leave an opinion question’s response as a comment where other users can read (for inspiration/ information)

I downloaded my python graphs as assets onto my website and gathered information about global warming. I looked at a few surveys in order to see features I liked and didn't like in order to create the best possible survey. In one of the websites(in reference column), I didn't like that the survey was lengthy with a lot of text which I thought was overwhelming. I then created a form with 3 questions, 2 multiple choice questions and a thought provoking question for users to leave a response. Initially I used radio buttons for the mcq. I was unsure how to transfer the information to sqlite database so,I changed the layout of the form so that the responses were submitted via button.I concluded that I only wanted one question that was thought-provoking, that stuck with user.

When I could transfer information from my form to my sqlite database, I moved onto the next part of my website.I looked into how to plot on js using plotly and a data from sqlite database. I began by setting values to plot. Although I wanted to use a pie chart, I tried a bar chart first to familiarise myself to using plotly on javascript. Then I created a pie chart with set integers. I tried to add the elements in my database to a list and split that javascript array into two, one being a yes list and the other being a no list. However, I realised it would be easier to insert the yes responses into a seperate table in the database and no responses into a no table so I varied my database a bit. In this way, it was easier to make two lists which could then be used to plot against each other. Using the server side javascript I retrieved all the data in the sqlite database. Using the client side javascript, with the function forEach(), I added all the data in the database to a list (both for yes responses into a yes list and no responses into a no list). Using plotly, I graphed lists against each other. Drawing the plots was initially an independant function but the length of the list outside the function displayData read 0. So I incorporated the graphing into the displayData function.

Development of the Artefact

File Structure

• index.html includes all the text, images etc that will present on the website
• styles.css includes all the css for the website including the flipcard feature
• client.js contains the function for the buttons and creating the graph
• server.js included placing responses in the database and retrieving it for the graph
• Python code is in Thonny file. In the same folder as the python code, there is the csv file. The newly created clean file and graphs will also be stored in the "Python" folder
• All images included on the website is in the "website" folder alongside the code

User Interface

I drew out a rough sketch of how I would like my website to look and how the features I plan to put in my website would be incorporated into the website.

Breakdown of Website code

• Image
• Text contextualising the graph(Image)
• Button to take quiz
• 2 mcq and one opinion question
• When done is clicked:
• Save answers for each question into a data set
• Use dataset to plot the responses on a pie chart
• Show the graph/comments

I chose a dark, interesting as my background because I thought it would grab attention and the background is neither overwhelming nor distracting. I also chose to include a video as well as the article and the graphs to suit all types of people whether the learn visually or aurally. I felt that instead of overwhelming the user with a cluster of writing and putting them off from reading, I would add a video that explained what global warming is, its consequences and what is in place to minimise the issue.

I used agile software development- They all fundamentally incorporate iteration and the continuous feedback that it provides to successively refine and deliver a software system.

Data Gathering

I got my datasets from knomeo.com. I downloaded the data I needed as a csv file. Python read the files as string.

Testing

I used functional testing throughout to see if the code ran properly. I used unit testing as well to make sure each small function or piece of code worked before integrating it to the major code. At the end I used integration testing for my website to see if the whole code worked efficiently together.