SUBMISSION OF

CSC541 PROGRAMMING INTERACTIVE SYSTEMS

SEMESTER OCTOBER 2023
FINAL REPORT

DATE OF SUBMISSION : 18/1/2024

GROUP STUDENT ID NAME SIGNATURE

M3CS2534A 2022702955 AHMAD DANIAL HAKIM BIN ROSMAN
M3CS2534A 2022961571 AZZARUDDIN BIN ABDULLAH
M3CS2534A 2022753195 MUHAMMAD HARITH IKHWAN BIN
ROSMAEINI

WE CERTIFY THAT THIS ASSIGNMENT IS OUR OWN ORIGINAL WORK AND MATERIALS
HAVE NOT BEEN COPIED FROM ANY OTHER WORK (PUBLISHED OR OTHERWISE)
WITHOUT ACKNOWLEDGEMENT IN THE TEXT. WE ARE FULLY AWARE OF THE
PENALTY OF PLAGIARISM.
 CSC541 Interactive Programming System

1.0 INTRODUCTION

Gamification in learning is an innovative approach that leverages game elements and

design principles to enhance the educational experience. By integrating elements like
competition, rewards, and interactive challenges, gamification aims to make learning more
engaging, motivating, and enjoyable. After extensive research we decided to implement
gamification on recipe sharing website similar to Yummly.

Yummly is a website and mobile app that provides a platform for discovering and sharing
recipes. Users can search for recipes based on various criteria such as ingredients, dietary
preferences, cuisine, and more. Yummly also offers personalized recipe
recommendations, meal planning features, and shopping lists. Yummly has many diverse
and different meals from many cultures around the world. We like to implement
gamification in a website like it.

2
 CSC541 Interactive Programming System

2.0 ESTABLISHING REQUIREMENTS

• Scenario

• Aurora is 27 years old, works as a doctor and love to cook. She always spends
her free time for learning new recipes. But sometimes she faces hard time to
find a new recipe because most the recipes she reviews and learning are either
from recipe magazine, which are rarely publishing their updated magazine or
a not updated website recipe.

• Meet Harraz, a 30-year-old professional in the field of marketing who embarks

on a transformative culinary journey with your gamified recipe website, seeking
to overcome several challenges that have hindered his cooking aspirations.

• Sarah is a 25-year-old college student who has recently moved out of her
parents' house and is living on her own. She's always been interested in
learning how to cook but never had the chance to pick up the skill. Her busy
schedule and limited cooking experience often lead to frustrating meal
preparation experiences.

• Sazali, a health-conscious individual with specific dietary restrictions and

allergies, often struggles to find suitable restaurants to dine at. Traditional food
review platforms usually provide generic and vague reviews, leaving Chris
anxious about their ability to meet dietary requirements. The lack of detailed
information makes it challenging for Chris to confidently choose restaurants.
However, they eagerly await a platform that offers comprehensive dietary
filtering options and specific allergen information. With these features, Chris
expects to have a personalized and worry-free dining experience, ensuring
they can explore a variety of restaurants while adhering to their dietary
guidelines.

3
 CSC541 Interactive Programming System

• Questionnaire

• Based on the survey, most responders describe themselves as beginner in

coding. About 45.5% responders said they are beginner in cooking, while
about 36.4% are intermediate. 9.1% say they are pro when it come to
coking while other 9.1% has no experience.

• The questionnaire shows that about 54.5% of responders find it difficult to

cook recipes from the website.
• Approximately 45.5% of responders don't face difficulties.

4
 CSC541 Interactive Programming System

• About 54.5% of responders find it easy to memorize recipes they're

interested in.
• Approximately 45.5% of responders struggle with memorizing recipes.

• Simply put, the majority (81.8%) of responders would appreciate a system

that categorizes recipes based on their skill level, while a smaller portion
(18.2%) isn't interested in such a system. This suggests that implementing
a skill-level categorization for recipes could be well-received by a significant
number of responders, potentially enhancing their experience on the
platform.

5
 CSC541 Interactive Programming System

• Most responders (30%) rate the website as easy to use, indicating a

positive experience for a significant portion of the audience. A large
majority (60%) gives a neutral rating, suggesting a middle-ground
perception of the website's usability. While a smaller percentage (10%)
finds the website very easy to use, and another segment (20%) rates it as
hard to use, no responders rated it as very hard to use. Overall, the
feedback suggests a generally favorable user experience, but there is room
for improvement, particularly for those who find the website challenging to
navigate.

• Most responders (90.9%) are interested in personally reviewing the recipes

they've tried on the website, indicating a strong desire for user-generated
content. A smaller percentage (9.1%) is not interested, and understanding
their reasons could provide insights for enhancing the overall user

6
 CSC541 Interactive Programming System

experience. This suggests an opportunity to encourage and promote user

reviews as a valuable aspect of the platform.

• Most responders (63%) are interested in having game elements on the

website to help with learning recipes, indicating a strong preference for
gamified features. A smaller portion (27.3%) is not interested, and some
responders (9.1%) are unsure. This suggests a potential opportunity to
enhance user engagement by introducing game elements, though it's
important to consider varying preferences and gather more feedback from
those not interested or unsure.

• Most responders (63.6%) believe that incorporating game elements would

help them learn more recipes, indicating a positive perception of the
potential benefits. However, a portion (27.3%) is not convinced, and some
responders (9.1%) are unsure. This suggests varying opinions on the

7
 CSC541 Interactive Programming System

effectiveness of gamified features, and further exploration of feedback from

those who are unsure or not in favor could provide additional insights.
Overall, a significant group sees the potential for enhancing the learning
experience through game elements.

• Most responders (63.6%) believe that adding game elements would help
them learn more recipes, showing a positive outlook. However, a portion
(27.3%) is sceptical, and some responders (9.1%) are unsure. This
suggests varying opinions on the effectiveness of gamified features, and
further exploration of feedback from those who are unsure or not in favour
could provide additional insights. Overall, a significant group sees the
potential for enhancing the learning experience through game elements.

• Majority of the responders (60%) agree to use the recipe website more if
gaming element applied. While other 20% don’t agree and the rest are not
sure. This show that user will more attracts to site if gamification is added
to the site.

8
 CSC541 Interactive Programming System

• The responses indicate a relatively even interest in both leaderboards and

quizzes, with 54.5% favoring each option. Leaderboards, categorizing
users based on their experience levels, and quizzes, testing knowledge of
recipes, are both popular choices among respondents. Meanwhile, 45.5%
express interest in a chance-based element that randomly suggests a
recipe. This suggests a diverse set of preferences, and incorporating a
combination of these elements could offer a well-rounded gamification
approach that caters to different user interests on the recipe website.

9
 CSC541 Interactive Programming System

3.0 STORYBOARD

10
 CSC541 Interactive Programming System

4.0 PAPER PROTOTYPE

1 2

3 4

11
 CSC541 Interactive Programming System

5 6

7 8

12
 CSC541 Interactive Programming System

13
 CSC541 Interactive Programming System

5.0 SYSTEM PROTOTYPING

Login interface

Main interface

14
 CSC541 Interactive Programming System

Choosing recipe

- Multiple recipe from a lot of countries like Japan, Korea, China, Malaysia and Indian
that the user can choose from.

Share recipe - A simple form for the user to share their recipe.

15
 CSC541 Interactive Programming System

View recipe
- This is where user can view the recipe and follow it’s instructions on how to cook certain
dish. In this case, it is one of Malaysia’s most popular dish if not the most popular, Nasi
Lemak. They can see the ingredients and step to cook it.

Quiz
A simple quiz about the food the user is interested. It can help them grew a deeper
appreciation for the dish and help them appreciate where it comes from and the culture of
the country it originated from.

16
 CSC541 Interactive Programming System

6.0 HEURISTIC EVALUATION ANALYSIS

• Visibility of system status

• Ensure that users receive immediate feedback on quiz results and understand
their current status within the gamification system.
• Implement clear and instant feedback mechanisms, such as visual cues or
notifications, to inform users about quiz outcomes and their progress within the
system.

• Match Between System and the Real World

• Verify that the language, terminology, and presentation of quiz questions align
with users' culinary knowledge.
• Use user-friendly language and provide additional context for challenging
questions to enhance alignment with users' real-world understanding.

• User Control and Freedom

• Ensure users can navigate quizzes freely, review answers, and exit without
penalties.
• Incorporate navigation controls within quizzes, offering users the flexibility to
move forward and backward, and provide a clear exit option without
consequences.
• Consistency and Standards
• Maintain a consistent design pattern for quiz interfaces and gamification
elements.
• Establish a standardized layout, color scheme, and typography for quiz
elements, ensuring a cohesive and familiar user experience.
• Error Prevention
• Minimize the likelihood of common errors, such as accidental quiz submission.
• Include confirmation prompts before submitting quizzes to prevent accidental
clicks and clearly communicate quiz rules to users.

17
 CSC541 Interactive Programming System

• Recognition Rather than Recall

• Minimize the need for users to recall information from previous quizzes.
• Implement a dashboard or profile section where users can easily view their
achievements, badges, and overall progress within the gamification system.

• Flexibility and Efficiency of Use

• Cater to users with varying levels of culinary knowledge by implementing
multiple difficulty levels for quizzes.
• Provide users with the option to choose difficulty levels, ensuring a
personalized and efficient learning experience.

• Aesthetic and Minimalist Design

• Ensure a visually appealing and clutter-free design for quiz interfaces.
• Focus on clean layouts for quiz questions and answer options, minimizing
unnecessary elements for a visually pleasing experience.

• Help Users Recognize, Diagnose, and Recover from Errors

• Provide informative error messages that guide users on correcting mistakes in
quiz submissions.
• Enhance error messages to be clear and actionable, assisting users in
understanding and rectifying errors.

• Help and Documentation

• Ensure users have access to help or documentation regarding gamification
features.
• Integrate tooltips or contextual help within the quiz interface, providing users
with guidance on specific actions or elements.

18
 CSC541 Interactive Programming System

7.0 CONCLUSION

The exploration and analysis conducted for the integration of gamification

elements into the recipe-sharing website have provided valuable insights. The majority
of users express a positive inclination toward the incorporation of game elements,
particularly quizzes and leaderboards, to enhance their learning experience. This
enthusiastic response highlights the potential for a gamified system to engage users
and elevate the overall platform experience.

Understanding that a significant portion of users finds the website easy to use is
encouraging. However, the feedback from users who encounter difficulties in cooking
recipes emphasizes the need for continuous improvement, especially in recipe clarity
and user guidance.

Moreover, the interest in user-generated content, as indicated by the overwhelming

90.9% in favor of personally reviewing recipes, suggests an opportunity to foster a
vibrant community around the website. Encouraging user reviews can contribute to a
dynamic and engaging platform, creating a sense of shared culinary experiences
among users.

The specific preferences for gamification elements, such as leaderboards and quizzes,
underscore the importance of providing diverse and tailored features. Incorporating a
mix of these elements could cater to varying user interests, ensuring a well-rounded
and engaging gamification approach.

In conclusion, the report recommends the implementation of carefully designed

gamification features, paying attention to user feedback and preferences. Continual
iteration based on heuristic principles and user testing will be key to optimizing the
gamified system and maintaining a user-centric approach. The findings provide a
foundation for enhancing the recipe-sharing website, creating an immersive and
enjoyable experience for users as they explore, learn, and share culinary delights.

19
 CSC541 Project Rubric
Beginner: Novice: Intermediate: 3 Expert:
TOTAL
1 point 2 Points points 4 points

The message or The message or Clearly conveys a

Conveys a clear
commentary about commentary about fully developed
message or
First Task an idea, notion or an idea, notion or message or
commentary about
(Introduction) event in the work is event in the work is commentary about
an idea, notion or
inconsistent or only partially an idea, notion or
event.
vague. developed. event.

Covers topic
Includes essential
completely and in
Includes some information. Includes
Second Task Includes little depth. Includes
essential enough elaboration
(Establishing essential information complete
information with few to give readers an
Requirements) and one or two facts information.
facts. understanding of the
Encourages readers
topic.
to know more.

The pictures and

The pictures and
text in the design
text in the design
Ideas and scenes are very well
The design is a little are pretty well
Third Task seems to be organized. One idea
hard to follow. organized. One idea
(Storyboard) randomly arranged. or scene
or scene may seem
follows another in a
out of place.
logical sequence.

Prototype was
completed on time,
shows multiple
states and/or pages,
uses handlebars for
Prototype was
GUI widgets,
completed on time,
incorporates basic
Prototype was not Prototype was shows multiple
interactivity like
completed on time, completed on time, states and/or pages,
Fourth Task show/hide, or pop-
does not show shows multiple uses handlebars for
(Paper up/overlay windows,
multiple states or states or pages, but GUI widgets,
Prototyping) incorporates
pages, and contains has little if any incorporates basic
advanced
no interactivity. interactivity. interactivity like
interactivity like
show/hide, or pop-
sliders and multiple
up/overlay windows.
interactive elements
(e.g. sliders with
overlays and
show/hide
interactivity)

0-1 media used. Effective

Buttons and Some use of Good combination of combination of
navigational tools multimedia and multimedia and multimedia and
are absent or design elements. design elements. persuasive design
confusing. Some buttons and Adequate elements.
Fifth Task
Use of visuals and navigational tools navigational tools Excellent use of
(System
images is confusing work properly. and buttons. navigational tools
Prototyping)
or absent. Use of visuals and Visual and images and buttons.
Message is images is limited. and attractive. Graphics effectively
confusing. Message is Adequately conveys entice audience.
conveyed. message. Accurately convey
message.
 Does a very poor job Does a good job of Does an
Does a poor job of
of evaluating the evaluating the exceptionally good
evaluating the
usability strengths usability strengths job of evaluating the
usability strengths
and shortcomings of and shortcomings of usability strengths
and shortcomings of
Heuristic the prototype, and the prototype, and and shortcomings of
the prototype, and
Evaluation makes very few makes relatively the prototype, and
makes few good
good good makes intelligent
recommendations
recommendations recommendations recommendations
for improving the
for improving the for improving the for improving the
prototype.
prototype. prototype. prototype.

Includes more than Includes 3-4 Includes 2-3 Grammar, spelling,

5 grammatical grammatical errors, grammatical errors, punctuation,
Mechanics errors, misspellings, misspellings, misspellings, capitalization are
punctuation errors, punctuation errors, punctuation errors, correct. No errors in
etc. etc. etc. the text.

Paper is interesting
and readable. It has
Paper is readable a distinct
Paper has limited and has an introduction that
Report is readability and an introduction, a body, grabs the reader’s
disorganized, has no inadequate and a conclusion. attention; a body
introduction, body, introduction, body, Some points could that clearly
Report
or conclusion. Work and/or conclusion. have used stronger addresses all main
Organization
needs to be Transitions are support, and points; and a
reorganized and re- lacking, and paper is stronger transitions conclusion that ties
done. difficult to could have helped paper together.
understand. paper have better Paragraphs flow
flow. together with
smooth transitions.

Works well with

Cannot work with Works well with others. Assumes a
Works with others,
others in most others. Takes part in clear role and
Cooperative but has difficulty
situations. Cannot most decisions and related
Group Work sharing decisions
share decisions or contributes fair responsibilities.
and responsibilities.
responsibilities. share to group. Motivates others to
do their best.

Communicates
Great difficulty Some difficulty Communicates
ideas with
communicating communicating ideas with proper
Oral enthusiasm, proper
ideas. Poor voice ideas, due to voice voice projection.
Presentation voice projection,
projection. Little projection, lack of Adequate
Skills appropriate
preparation or preparation, or preparation and
language, and clear
incomplete work. incomplete work delivery.
delivery.

Total Points /40