
News Arcade is a web-based gamified experience about creating News Articles. It is meant to inspire the youth to write their own news articles by selecting different pieces of pre-written text and combine them into a news article. The different pieces of text will have different keywords attached to them and the goal of the game is to make an article that matches a specific keyword like inspiring or analyzing. That way it gives an understanding of the effects journalists use when writing a piece for an online audience.
The game is available to play in the here. (Published 2024)
Role: Programmer
Responsibilities: I programmed the front-end of the experience using Angular, HTML and CSS. I would receive a JSON from a back-end, managed by a external team situated in Germany. I would extract the information from the JSON and fill it to the appropriate places in front-end. I added animations and colors to the experience to give it a more interesting look that would engage people more. Elaboration of the features are described in details further down this page.
The experience consists of an introduction page, an information page and then multiple pages where you are presented with two statements and then have to choose one of the two. The two statements are divided by different colors. After having read the statements a CSS animation is used to fill in the buttons with the colors. The percentage is calculated by statistics gained from back-end in the JSON. The colors is also received from back-end and filled into the appropriate places using variables from the JavaScript sent to the CSS in the :root function.


When selecting a statement and having received feedback, when continuing to the next page a pop-up will appear showing the combined points per keyword you have received so far. This is to give the player an idea of how close they are to making an article that has the correct keyword. A bar diagram coded in JavaScript was used for this. Depending on whether the player gets most points in the correct keyword or not, the final page will be displayed with either green or red and with customized feedback.
