IST541 Final Project Storyboard

Irfanullah Jan
September 26, 2019

Project Title: Understanding the Code of Ethics “Pashtunwali”

Objective: To provide a briefly description the history of the code. By viewing and completing
this instructional website, the learners will be able to master or know the following:

- To learn and know the history of the Pushtonwali or code of ethics

- To master each principle of the code
- Identify each principle of the code
- Will be to read more about the history of the code by clicking the resources
- Will be able to watch short clips that discuss the code

Navigation: The table below lists the pages that will be included in this website. Click on each
of the titles to skip to a review of that specific page.

Home History Principles First Second Third Fourth Knowledge Resources

Page of the of the Principle Principle Principle principle Check
code code

Each page will have the same navigation bar along the top of the page. Also, each page
may contain additional links to provide additional information.

Home Page Content:

The home page will display welcoming message like this welcome to the code of ethic
Pushtonwali! This webpage will greatly assist you in understanding the code of ethics and
each section of the page contains additional navigation, media and interaction. Also, each
page will have the same subtle background pattern in various colors and a significant area may
be highlighted to get the attention. I will include an image that says “Understanding
Pushtonwali”. We will briefly talk about Pushons tribe where are they settled in the south Asia,
We will introduce how many principles does code of ethic has, also we will introduce you to
each principle. Also, will view some images of the Pushtons and watch a short visual clip about
the importance of the code amongst the followers. At the end, we will be able to identify each
principle of the code of ethic. Also, you will be able to fully educate not solely yourself, but you
will be able to educate others about the code.

Media: A few images of the Pushton people from different region of Afghanistan that indicates
the code of ethics.

Interactions: Clicking on each principle of the code, will take the learner to the brief description
of the code.

Page One: The First principle of the code

Summary: This page will introduce you the first principle of the Pashtonwali which is
“Melmastia (Hospitality)” The usage of this principle in the real world and what does it
mean to Pushtons.

Media: Written scenarios converted into images and by clicking on the image, it will define the
principle as Melmastia – hospitality: This hospitality requires that any person be afforded the
host’s
protection.

Page Two: The Second Principle of the code

Summary: This page will same as the page one, will briefly describe the second principle of
the code. Also, this page will provide the importance of second principle in the Afghan
community. Additionally, this page may contain a short video clip that talks about the principle.

Media: I may use the “Updating Content Using Javascript and jQuery” or changing content
when hovering over an image or I may us the “Adding the Bootstrap Accordion widget”

Interactions: I will use accordion, or I may us the “Adding the Bootstrap Accordion widget”.
This will allow learners to view and read about the principle.

Page Three: The Third Principle

Summary: In this section, learners will learn the definition of the third principle of the code and
its importance. I may add real-world case scenario to make learners better understand this
principle of the code.

Media: Image of real-world case or a short video clip and it’s practice in the interaction
elements.
Interactions: I may make learner to hovering or clicking over an image or watch the video clip.
Learners will be able to click an image as needed to better understand the definition of the
principle. Also, I may add knowledge check option too.

Page Four: The Fourth or last Principle

Summary: In this section, learners will learn the definition of the fourth principle of the code
and its importance. I may add real-world case scenario to make learners better understand this
principle of the code, same as page Three.

Media: Image of real-world case or a short video clip and it’s practice in the interaction
elements (Same as Page Three).
Interactions: I may make learner to hovering or clicking over an image or watch the video clip.
Learners will be able to click an image as needed to better understand the definition of the
principle (Same as Page Three). I may apply my knowledge of Lab3 “Embedding External
Content Using iFrames”

Page Five: Quiz page of knowledge check page

Summary: A short quiz will be created in Google Forms and then embedded into the page.
The quiz will have various forms of questions to cover all principles of the code.
Media: Info icon.
Interactions: Learners will be answering questions in the Google form embedded in the
page. Also, I may apply my knowledge from Lab 4 “Interactive Web Page2: Adding Content
when Clicking on Text”

Page Six – Resources

Summary: This page will list all the used resources and some additional external resources.
Media: Image of the “Understanding Pushtonwali” and may provide some additional images of
the Pushton tribes.
Interactions: clicking on the home page will take learners back to the home page.