Project brief
In this exercise we were building upon our previous knowledge of using jQuery to add more depth to our websites along with trying out a new CSS framework called Bulma. In addition to this we wanted to test out how to link Google Analytics into code. We experimented with this by replicating an aspect of the popular board game, Cluedo. In the game, there are six suspect cards, six weapon cards and nine room cards. At the very beginning one card from each category is chosen and put into a folder named ‘CONFIDENTIAL’. This information contains who committed the murder, what weapon they used and where the crime happened. After this each player is dealt an even amount of randomly selected cards from the remaining pile. From this they must figure out which cards are in the folder. For the purpose of this small project however, we chose to look into the element of the game called ‘accusing’. This is when a player thinks they know what the three final cards are and lock their final answer in. We were working towards creating an online, trackable service that lets the user select a total of three cards, one from each category and saves this into a separate selection box on the screen.
An Introduction to Bulma
Bulma is a lightweight CSS framework built around Flexbox. It is designed for mobile first to always make sure your websites are responsive and is available open-source from GitHub. Setting up Bulma on a webpage is simply a case of adding the responsive viewport meta tag and then importing the style sheet. As an added extra you can also add Font Awesome icons, an extensive library of vector graphic icons. Bulma has an easy-to-learn syntax and it’s CSS elements are easily rewritten in SASS to add extra customisation.
– “With simple readable class names like
.button or .title, and a straightforward modifiers system like .is-primary or .is-large, it’s easy to pick up Bulma in minutes.” (Bulma, 2018)Writing the code
Being able to use the Bulma framework as a skeleton for coding the site was a great tool to get us started. I soon came to love the syntax and it was easy to figure out what class names I required with the actions I wanted to execute. Firstly, we added the viewport tag at the beginning to make it responsive and imported the stylesheet.
<link rel="stylesheet" href="css/bulma.css">
Secondly, we linked some local JavaScript files so we could add jQuery when we had more content.
<script src="js/jquery-3.2.1.min.js"></script> <script src="js/cards1.js"></script>
To complete setting up the file, we inserted the Google Analytics code (global site tag) into the <script> tag in the header of the HTML.
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-110585075-2', 'auto');
ga('send', 'pageview');
</script>
To start making the website we set up a section tag and inside that started creating divs for the suspect cards. This is where we are first introduced to modifiers in the tile tag.
<section class="section">
<!--Suspects-->
<div class="tile is-ancestor">
<div class="tile is-2">
<article class="tile is-child container">
<a class="card-link suspect" href="#"></a>
<figure class="image">
<img class="is-3by4 greyscale" src="images/col-mustard.jpg" />
</figure>
<p class="subtitle card-title">Colonel Mustard</p>
<p class="card-description">The militant and athletic colonel.</p>
</article>
</div>
The above lines of code is an example of the divs created for the suspects, weapons and rooms. We lined up the cards into a row of six and because Bulma supports flexbox, they are fully responsive. The images are imported from a GitHub classroom folder and are given a greyscale tint which is defined in the inline CSS. This is so we can add a jQuery command for the cards to have colour when clicked on. All three elements are given classes: image, card-title and card-description. These classes are also called in the jQuery in order to create the ‘Cards Selected’ section at the bottom of the page. Placeholder image and text has been placed there for when the page first loads and the jQuery looks like this:
$("a.suspect").each(
function(index, item) {
$(item).click(function (e) {
var siblings, img, description;
siblings = $("a.suspect").siblings("figure.image").find("img");
siblings.removeClass("colourscale");
siblings.addClass("greyscale");
img = $(item).siblings("figure.image").find("img");
img.removeClass("greyscale");
img.addClass("colourscale");
suspect = $(item).siblings("p.card-title").text();
description = $(item).siblings("p.card-description").text();
console.log("suspect = " + suspect);
console.log("description = " + description);
suspectImage.attr("src", img.attr("src"));
$("#suspect-title").text(suspect);
$("#suspect-description").text(description);
sendTrackingEvent("Select suspect ", suspect);
})
})
This code snippet from the JavaScript file shows that when a suspect item is clicked, a function is executed to change the card from greyscale to colourscale, replaces the placeholders with the information of the selected cards and sends the tracking event to Google Analytics. Here is the code for the analytics:
function sendTrackingEvent(action, label) {
ga("send", "event", "CluedoCrards", action, label);
}
function ga(a, b, c, d, e) {
console.log("Tracking action = " +d+ "Tracking label = " +e);
}
Conclusion
Being introduced to Bulma was a great follow on from using Bootstrap and Furtive and it is definitely my new favourite. I’m really enjoying using CSS frameworks whilst working within the strict time constraints because it saves a lot of time and with Bulma’s simple modifiers the whole experience was very pleasant. Using Google Analytics for the first time was very interesting as I had never tried it before and I have no where near seen it’s full potential yet. As a small introductory assignment I wasn’t expecting to gain too much knowledge about it and I believe this is true. I learnt more about jQuery and Bulma than Google Analytics, however I look forward to doing more work with it in the future.