Ukrainian Christmas E-Learning Site
Team Effort
Production Company is a class in which we’re tasked with making websites as a team. It functions like working with a real production team: The instructor acts as a project manager, and each student group member takes on a primary role in production. This particular website was made in the second half of my third semester, and I took on the sole development role for the first time. Our previous sites were more development-focused and less content-heavy, but because the concept of an e-learning website is more focused on the content and visuals needed to teach users the subject, I could take on both back and front-end development myself while my team members worked on various aspects of the site’s content.
Testing and Matching Wireframes
Because my Web Communications class was all solo work and my previous role in Production Company Development was solely back-end development, this assignment was my first time having to replicate a wireframe given to me by someone else. Before this assignment, I didn’t feel very confident in my CSS abilities, but being challenged to replicate a design and doing so successfully changed that. I found it rewarding to look at a design and translate it into HTML and CSS like a sort of puzzle. Laying the CSS groundwork was one of two things I did while waiting for more content to be ready for the site; The other was testing. We had plans for both multiple-choice and drag-and-drop quizzes, both of which I wanted to test and ensure I could get working before the content for them was ready.
Drag-and-Drop Functionality
Having just wrapped up JavaScript lessons in Web Communications, I was excited to put my skills in this new language to work with the drag-and-drop quiz. There were a few other places on the website where JavaScript was used, such as for the sound bites in the first module, and the slideshow in the third module, but this was by far the most advanced use. I broke the demo into a few steps: Make one item drop into three targets, with one turning green if it’s marked the correct answer, make twelve items drop into twelve targets, with each matching to a correct target and turning green, and finally make correctly answered items lock into their targets while incorrectly answered items remain draggable and their targets turn red. It took some fiddling with if statements and datasets but I got the demo to a point where it was ready to be filled with the quiz content, and when the time came to do so, it incorporated into the demo code easily and worked flawlessly. Another part of the site functionality that gave me trouble was tracking user progress. I had to figure out how to track the module completion non-linearly and show the user their progress. I had some difficulty setting cookies based on pre-determined passing quiz scores at first, but once I figured it out I was able to use the cookies to show a graphic that indicated the user’s progress, as well as change the index page’s message.
A Realistic Experience
I was surprised by how much I enjoyed taking on the sole development role for this project. I found that in past Production Company assignments, poor time and task management left teammates dipping their toes in every role of the project. With this project, however, I had a more realistic development experience: Being given a wireframe to work with, testing functionality before content is ready, and relaying progress to the project manager and my teammates. It was a relief being able to focus on my given role and it allowed me to really push myself with the functionality of the site, the end result being a useable learning tool that I’m proud to say I coded from the ground up.