MULTI-ACTIVITY

INTERACTIVE
STORYBOARD
Presented by

MEENHAZ AHMED
PIYALI DAS
SANJOY SAHA
SOUMI BHATTACHARYA (GROUP LEADER)

ST.THOMAS COLLEGE OF ENGINEERING &

TECHNOLOGY
Contents
1. Brief description of the Problem……………………………………2
2. Introduction…………………………………………………………..2
3. Objective……………………………………………………………..3
4. Purpose……………………………………………………………….3
4.1 Top Frame……………………………………………………….3
4.2 Left Frame………………………………………………………4
4.3 Main Frame……………………………………………………..4
4.3.1 PDF…………………………………………………….....4
4.3.2 VIDEO……………………………………………………5
4.3.3 AUDIO……………………………………………………8
4.3.4 WHITEBOARD………………………………………….9
5. Methodology…………………………………………………………10
6. Design………………………………………………………………..10
7. Whiteboard Layout...............................................................................20
8. Database…............................................................................................23
9. ER Diagram….......................................................................................24
10. Connection to the Database..................................................................26
10.1 MySQL Connection…………………………………….......28
11. Proposed Platform…………………………………………………….28
12. Software Requirements…......................................................................29
13. Hardware Requirements………………………………………………30
14. Story Board…………………………………………………………… 31
15. Effort Estimation………………………………………………………34
16. Conclusion……………………………………………………………..35
17. Bibliography…………………………………………………………...36

1
BRIEF DESCRIPTION OF THE PROBLEM
Design a framework for the development of the multi-activity interactive
storyboard.

INTRODUCTION

Storyboard allows the creator to design the layout of each screen within the presentation
with details such as size of graphics text or location or background colour etc. Each
screen details the media elements present along with their relative positions.

Storyboard is a sketch of how to organize a story and list of its contents. A storyboard
helps us to:

 Define the parameters of a story within available resources and time.

 Organize the document

 Figure out what medium to use for each part as required.

Interactivity provides the users a way to interact with the presentation using which we
can navigate directly to the region of interest. Thus we need the presentation to accept
input from user and modify itself accordingly.

Thus here the user is given a list of choices and availing those and clicking on the right
options the user can interact to develop the document.

Interactive storyboard lets the user experience the system in a realistic manner,helping
greatly in understanding the user’s objectives and requirements.

The interactive storyboard is an active template where we allow the user to interactively
design the layout of each screen of the presentation specifying the necessary details of
each media elements present on the screen.

2
OBJECTIVE

The objective is described below:

 To provide the user an active template with which one can interact to
produce the required artifact.

 A top menubar contains the navigation and editing controls.

 A sidebar tree-menu displays the contents.

 The relevant multimedia contents and an interactive whiteboard is displayed

in the four display frames.

PURPOSE

Using an interactive storyboard ,the user can actively participate and

produce a customized artifact as per his/her specified needs. It can be modified as
per the user’s needs.

The entire screen will be divided into a number of frames.

Top frame:

Here there is a menubar containing the following

1. File: Suboptions includes new,open,save and close.

2. Insert: Here it is possible to select which multimedia elements is present

in which frame.Options present are text,audio,video,whiteboard etc.

3. View: Here two the artifact can be viewed in

a) Developer view
b) User view

4. Help: This is a help option for the benefit of the developer or user.

Left frame:

3
 This is a sidebar containing a tree menu.

Each submenu displays the corresponding set of multimedia elements in

the main frame.They contain links which connect to the database containing the
URL for loading each specific frame

Initially the treemenu has just 1 sub-part.The developer adds and

expands the
Tree menu bar as per requirement.

Right-clicking a menulink gives an option to add a menu link at the

same level or to delete the link.

Main frame:

Here the different multimedia elements are displayed.It is divided

into four smaller frames.The different elements present are:

1) PDF :
Portable Document Format (PDF) is an open standard for document
exchange. It is a portable secure document.
Each PDF file encapsulates a complete description of a fixed-
layout 2D document that includes the text, fonts, images, and 2D vector
graphics which compose the documents.
Here is no direct method for adding PDF file to an Html page, so
we add it via Hyperlink.

2) VIDEO:
We add this with the help of a hyperlink.
We add video to your Web page in different ways and using different formats.
Video can be downloaded to the user or it can be streamed so that it plays while it
is downloading. The most common streaming formats available on the Web for the

4
transmission of video files are RealMedia, QuickTime, and Windows Media. With
these formats, we can stream audio and video simultaneously.

If we like to include a short clip that can be downloaded rather than

streamed, we can link to the clip or embed it in our page. These clips are often in
the AVI or MPEG file format. The Video Files category includes a wide range of
video formats, which use different codecs to encode and compress video data.

Flash Video Format (.flv)

Because of the cross-platform availability of Flash video players, the Flash video
format has become increasingly popular. Flash video is playable within Flash
movies files, which are supported by practically every browser on every platform.
Flash video is compact, and supports both progressive and streaming downloads.

AVI Format (.avi)

The AVI format, which stands for audio video interleave, was developed by
Microsoft. 
It stores data that can be encoded in a number of different codec’s and can contain
both audio and video data. The AVI format usually uses less compression than
some similar formats and is a very popular format amongst internet users.

The AVI format is supported by almost all computers using Windows, and can be
played on various players.
Some of the most common players that support the avi format are:

 Apple QuickTime Player (windows & Mac)

 Microsoft Windows Media Player (Windows & Mac)
 VideoLAN VLC media player (Windows & Mac)
 Nullsoft Winamp

Quicktime Format (.mov)

5
The QuickTime format was developed by Apple and is a very common one. It is
often used on the internet, and for saving movie and video files.

The format contains one or more tracks storing video, audio, text or effects. . It is
compatible with both Mac and Windows platforms, and can be played on an Apple
Quicktime player. 

MP4 Format (.mp4)

This format is mostly used to store audio and visual streams online, most
commonly those defined by MPEG. It Expands MPEG-1 to support video/audio
"objects", 3D content, low bit rate encoding and support for Digital Rights
Management.

The MPEG-4 video format uses separate compression for audio and video tracks;
video is compressed with MPEG-4 video encoding; audio is compressed using
AAC compression, the same type of audio compression used in .AAC files.

The mp4 can most commonly be played on the Apple QuickTime Player or other
movie players. Devices that play p4 are also known as mp4 players.

Mpg Format (.mpg)

Common video format standardized by the Moving Picture Experts Group

(MPEG); typically incorporates MPEG-1 or MPEG-2 audio and video
compression; often used for creating downloadable movies. It can be played using
Apple QuickTime Player or 
Microsoft Windows Media Player.

Windows Media Video Format (.wmv)

WMV format, short for Windows Media Video was developed by Microsoft. It
was originally designed for internet streaming applications, and can now cater to

6
 more specialized content. Windows Media is a common format on the Internet, but
Windows Media movies cannot be played on non-Windows computer without an
extra (free) component installed. Some later Windows Media movies cannot play
at all on non-Windows computers because no player is available.
Videos stored in the Windows Media format have the extension .wmv.

3GP File Extension (.3gp)

The 3gp format is both an audio and video format that was designed as a
multimedia format for transmitting audio and video files between 3G cell phones
and the internet. It is most commonly used to capture video from your cell phone
and place it online.

We can use Director to create Shockwave movies or Flash to create

interactive, low-bandwidth, multimedia presentations for the Web. With Flash, file
size is surprisingly small, and the technology works across many platforms. (Of
course, users must first download the free player plug-in before they can view
these files.) . Later we'll focus on adding Shockwave and Flash files to the
documents using Dreamweaver.

.
3) AUDIO:
The following list describes the more common audio file formats and some
of the advantages and disadvantages of each for Web design.

7
 About audio file formats

The MIDI or MID (Musical Instrument Digital Interface) format is for

instrumental music. MIDI files are supported by many browsers and don't require a
plug-in. Although their sound quality can be very good, this can vary depending on
a visitor's sound card. A small MIDI file can provide a long sound clip. MIDI files
cannot be recorded and must be synthesized on a computer with special hardware
and software. Use this format if we want background sounds to play when pages
open up.

WAV (Waveform Extension) format files have good sound quality, are

supported by many browsers, and don't require a plug-in. We can record our own
WAV files from a CD, tape, microphone, and so on. However, the large file size
severely limits the length of sound clips that we can use on our Web pages.

The AIF (Audio Interchange File Format, or AIFF) format like WAV files,
also has good sound quality, can be played by most browsers, and doesn't require a
plug-in; we can also record AIFF files from a CD, tape, microphone, and so on.
However, the large file size limits the length of sound clips that we can use on our
Web pages.

The MP3 (Motion Picture Experts Group Audio, or MPEG-Audio Layer-3)

format is a compressed format that makes sound files substantially smaller. We
can use MP3 to convert large stereo WAV/AIFF files to a more manageable format
without compromising on the sound quality, which is very good: if an MP3 file is
recorded and compressed properly, it can rival a CD. We can stream the file so that
a visitor doesn't have to wait for the entire file to download before hearing it.
However, the file size is larger than a Real Audio file, so a whole song could still
take quite a while to download over a normal phone line connection. To play MP3
files, visitors must download and install a helper application or plug-in such as
QuickTime, Windows Media Player, or RealPlayer.

8
 The RA, RAM, RPM, or Real Audio format has a very high degree of
compression with smaller file sizes than MP3. Whole song files can be
downloaded in a reasonable amount of time. Because the files can be streamed
from a normal Web server, visitors can begin listening to the sound before the file
has completely downloaded. The sound quality is poorer than that of MP3 files, but
new players and encoders have improved quality considerably. Visitors must
download and install the RealPlayer helper application or plug-in in order to play
these files.

The AU, SND, or Sun or Java format is similar to the WAV and AIFF formats,
but the compression is more flexible. This format is used exclusively for Java
applets and applications and therefore is compatible across platforms. It is also
very popular on SUN/Unix machines.

Embedding sound incorporates the audio directly into the page,but the
sound plays only if the visitor has the appropriate plugin for the chosen sound
file.It allows the developer greater control in
 The clip’s play volume.
 Which part,if any,of the player’s control is visible
 The starting and ending points of the audio clip.

4) WHITEBOARD: Designing the whiteboard can help in sharing notes,

images, and video.
 It is the multi user web app that can be used for tutoring, distance learning,
training etc. With the whiteboard background images, text can be uploaded
and all users can se the changes in real time.
 The proposed white board can be document oriented ie, the user will
be allowed to save his work and restore them later.
 Only one document can be opened at a time like the text editor.
 There can be Internet Relay Chat where a number of users from
different part can connect to a server and communicate with each other

METHODOLOGY

9
DESIGN

10
 Top frame: It is created by the spry menu bar option of Dreamweaver. First the
horizontal menu bar is to be selected. It comes with predefined defaults. In the
properties windows on editing and adding and deleting options the required format
is created.

 Left frame: The tree menu is implemented by a simple plug-in from

pluginlabs.com. On installation and adding, there appears an option to add a pre-
defined or new menu. In the next step the names of the links and related URLs are
specified. It is added after that.

 Main frame: The main frame is designed with multimedia elements:

PDF:
A PDF file is a portable secure document. Here is no direct method for adding
PDF file to an Html page, so we add it via Hyperlink. The document present in the
PDF can be saved as and when required.

Video: We add this with the help of a hyperlink.

 Inserting Shockwave movies: ADOBE “Shockwave”, a standard for interactive

multimedia on the web is a compressed format that allows media files created in
adobe “Director” to be downloaded quickly and played by most popular browsers.
1. In the document window the insertion point is placed where we want to
insert a
Shock wave movie.
Select: Insert>Media>Shockwave
2. In the dialog block that appears, a movie file is selected.
3.In the property inspector the width and the height of the movie are entered.

11
 Inserting FLV files:
1. Select Insert>Media>FLV
2. In the Insert FLV dialog box Progressive download or Streaming video
is selected from Video type pop-up menu.
Progressive download video:Downloads the FLV file to the site visitors hard
disc and plays it.

2. Streaming video:Streams the video content and plays it on a webpage

after a sort buffer period.

3. The rest of the options in the dialog box are to be completed

4. When an FLV file in inserted in a page Dreamweaver inserts the code

that detects whether the user has the correct version of the flash player.If not
the page displays default content that prompts the user the download the latest
version.

 Adding video(non-FLV) :
1.The clip is placed in the site folder.These clips are often in the
AVI or MPEG file format.
2.The clip is linked or embedded into the page.To link to the clip
the text is enetered is entered for the link such as “Download clip”,the text is
selected and the folder icon in the property inspector is clicked.The video
file is browsed and selected.
3.The user must download a helper application(plugin) to view the
common streaming formats like Realmedia,Quicktime and Windows media.

12
 Audio:
Embedding sound incorporates the audio directly into the page,but
the sound plays only if the visitor has the appropriate plugin for the chosen
sound file.It allows the developer greater control in
 The clip’s play volume.

 Which part,if any,of the player’s control is visible.

 The starting and ending points of the audio clip.

The steps for embedding sound files are:

1. In Design view, place the insertion point where you want to embed the file
and do one of the following:

2. In the Common category of the Insert panel, click the Media button and select
the Plugin icon  from the pop-up menu.

3. Select- Insert > Media > Plugin.

4. Browse for the audio file and click OK.

5. Enter the width and height by entering the values in the appropriate text boxes
in the Property inspector or by resizing the plug-in placeholder in the Document
window. These values determine the size at which the audio controls are displayed
in the browser

13
 Whiteboard:
The methodology to design it using the web-development application
Dreamweaver is discussed :

Dreamweaver is started and then Site>New Site.

The dialog box appears then.

14
The advanced tab is selected and in order to create the local site first we
need to select local info and type in the details as required.
After clicking Ok Manage Sites dialog box appears, showing the New local
Site.

Then similarly the Remote Site is set up. Background file transfer works
for all of the transfer protocols supported by Dreamweaver(FTP, SFTP, LAN
etc). There is also an option of using Local/Network to transfer files.

15
16
Connection to the remote site is established and 2 sites are synchronized.

17
Check In/Check Out system can be used to transfer files between local and
remote sites. If only one person is working on the remote site, Get and
Put commands are used to transfer files.
To cancel the transfer of file, the Cancel button in the Background File
Activity dialog box is clicked.
Two frequent causes for connection failures are a server that is down or is
busy.

The diagram below illustrates the major relay points data must go through to
complete a successful transfer(FTP).

18
 A new file is created under the local site and a jump menu is
designed that will link to the whiteboard and similarly for the remote
site.

The body of the html code will be:

<body>
<form name="form" id="form">
<select name="jumpMenu" id="jumpMenu">
<option
value="http://www.groupboard.com/mp/gb.cgi?
board_id=115017&amp;large=true&amp;a=false ">whiteboard
</option>
</select>
<input type="button" name="go_button" id= "go_button"
value="Go" onclick="MM_jumpMenuGo('jumpMenu','parent',0)" />
</form>
</body>

19
The Whiteboard will be designed as below:

20
 WhiteBoard

 1.1-multi-user

 1.2-single-user.

 1.3-gallery

 2.1-messages

 2.2-Set background color

 2.3- Upload background

 2.4-Clear

 2.5-Save

 2.6-Load

 2.7-Print

 3-Toolbox and all the options

 4.1- Chatbox

 4.2-Chat Names

 5-Blank board

Creating a local site and a remote site and accessing suitable protocols
for transfering files , can easily help to implement the Whiteboard
Application .Thereby creating a virtual sharing system between the local
and remote machines.

21
Each link would bring changes in more than one frame.Steps for that will be:
1. Select your link text or image in the frame.
2. If you selected text for your link, type javascript:; in the Link field of the Text
Property
Inspector.
3. Open the Behaviors panel by choosing Window ➪ Behaviors.
4. Click the Add (+) button at the top of the Behaviors panel, and in the drop-down
menu,
choose Show Events For ➪ 4.0 and Later Browsers.
5. Click the Add (+) button again to display the list of available behaviors and
choose Go
To URL.
6. Dreamweaver displays the Go To URL dialog box and scans your document
for all named frames. Select a target frame from the list of windows or frames.

22
DATABASE
The database will include:

TABLE NAME: TEMPLATE

NAME DATATYPE DESCRIPTION

Link Varchar(100) Identifies each link of the
artifact
Sublink Varchar(100) Associated sublink
url Varchar(100) Link for corresponding
frame

TABLENAME: FILE DESCRIPTION

NAME DATATYPE DESCRIPTION

File_type Varchar(100) The type of file to be
inserted by the user.
Browsing _ink Varchar(100) link for associated type

TABLENAME:USER DETAILS

NAME DATATYPE DESCRIPTION

User_id Number(10) Unique number to identify
a user.
Username Varchar(100) Username of user
password Varchar(100) Password of user

23
ENTITY RELATIONSHIP DIAGRAM

The ER diagram can be used to create an abstract and conceptual representation

of data.
It can be used to show the relationships between the database tables.

The basic purpose of designing the ER diagram are:

 Conceptual simplicity
 Visual representation
 Effective communication
 Integration with the relational database model.

We can express the overall logical structure of a database graphically with an E-R

diagram.

24
Figure 1

25
Figure 1 shows the proposed ER diagram.

Here the template, provided to the user ,will have a range of options (as
discussed later in the StoryBoard). We may choose LINK and SUBLINK to be the
composite primary key to select a particular option in each case.the corresponding URL
will link to the required file,(in the FILE DESCRIPTION table),thereby giving the user
an option to insert the file of his choice as required.

CONNECTING TO THE DATABASE

An active content page is a blend of traditional HTML and a database server

language such as PHP, Active Server Pages (ASP), or ColdFusion Markup Language
(CFML).

PHP: Hypertext Preprocessor is a widely used, general-purpose scripting

language that was originally designed for web development to produce dynamic web
pages.
ASP is a powerful tool for making dynamic and interactive Web pages.
CFML generally augments standard HTML files with database commands,
conditional operators, high-level formatting functions, and other elements to produce web
applications.

The most efficient way to connect to a data source is to use an OLE DB

provider directly. OLE DB (Object Linking and Embedding, Database, sometimes
written as OLEDB or OLE-DB) is an API designed for accessing data from a variety of
sources in a uniform manner. It is a set of interfaces implemented using the Component
Object Model(COM).

OLE DB separates the data store from the application that needs access to it
through a set of abstractions that include the datasource, session, command and rowsets.

26
This was done because different applications need access to different types and sources
of data and do not necessarily want to know how to access functionality with technology-
specific methods. OLE DB is conceptually divided into consumers and providers.

The consumers are the applications that need access to the data, and the
provider is the software component that implements the interface and therefore provides
the data to the consumer.
Steps to create an OLE DB connection string:

1. Choose Window ➪ Databases to display the Databases panel.

2. Click the Add (+) button and select Custom Connection String from the
drop-down list.

3. Enter a label for your new connection in the Connection Name field.

4. Enter the complete connection string in the Connection String field.

5. To ensure that your connection is properly set up, click Test in the Custom
Connection String dialog box. Dreamweaver tells you if the connection was
established successfully.

MySQL is a relational database management system (RDBMS)[1] that runs

as a server providing multi-user access to a number of databases.
MySQL can be built and installed manually from source code, but
this can be tedious so it is more commonly installed from a binary package
unless special customizations are required.
Dreamweaver’s PHP model supports MySQL connections for
Setup.

27
 MYSQL connections are:
1. Choose Window ➪ Databases to display the Databases panel.

2. Click the Add (+) button and choose MySQL Connection from the drop-
down list.

3. Enter a label for your new connection in the Connection Name field.

4. Enter the IP or domain address of your MySQL server in the MySQL Server
field.

5. Enter your database username in the User Name field and password.

6. Enter the database name in the Database field, or click Select and choose
from a list of all the databases to which you have access.

PROPOSED PLATFORM
Dreamweaver software empowers designers and developers to build
standards-based websites with confidence.

Dreamweaver is an extremely useful tool and here are 8 great reasons why we
chose to use Dreamweaver.

1. Manage many sites easily: Dreamweaver makes it as easy as possible to toggle

between sites we are working on. If we build websites for a living, this ease of switching
up projects is a definite must.

28
2. Easy to upload via built in FTP: The built in FTP features are great, not to mention
the fact that you can update a page that you are working on using the keyboard shortcut
'CTRL + SHIFT + U'. In addition, the FTP system is capable of changing file permissions
(CHMOD) which is nice.

3. Built in CSS features:One of the best things about Dreamweaver is the way it makes
complicated coding processes easy for people who aren't hardcore coders. The CSS tools
is a perfect example. Using the point and click CSS window, you can start adding CSS
styles to your sites.

4. Rollover Buttons:Rollover buttons are super-easy to create in Dreamweaver, and

Dreamweaver does all the behind the scenes coding for you. Also, if we don't want to
create the buttons ourself, we can choose from a built in selection of flash buttons that
have rollover effects, so we can have our rollover buttons right out of the box.

5. Pop-Up Menus: With the built in pop-up menus in the tag inspector, we can create the
types of navigation links we see on professional looking sites. Dreamweaver does all the
coding for us, all we need to do is point and click a few times.

6. Server Side Include Buttons: Server side includes are so essential to website
building, Dreamweaver hits the mark perfectly with SSI and gives us several options to
choose from. Understanding this key feature will save us time and help to build better
sites.

7. Dreamweaver Template Files: This method of working with templates is easy to use,
even for a beginner, and makes your websites more flexible. If we make a mistake when
designing our site, but have use a dwt file, we can correct the mistake on hundreds of
pages instantly. Also it is useful for updating site layouts.

8. Web forms creator: The web forms creator in Dreamweaver is exceptional. It is easy
to create web forms, and with a small additional PHP script, we can have results of any
form sent to any email address we want.

Software requirement: Operating system Windows XP or higher version. Flash player,

Adobe Reader. Any other required software if not present, the user would be promoted to
download it if possible.

29
Hardware requirement: The minimum requirements are:

Main Memory : 512MB

Hard Disk Drive : 4.3GB

Cache Memory : 512KB

30
STORYBOARD

31
1:It is allocated for the PDF file.

 1.1 Button to browse and add file

 1.2 Button to remove displayed file

2:It is allocated for the video file.

 2.1 Button to browse and add video

 2.2 Button to remove video

3:It is allocated for the Interactive Whiteboard

 3.1 Send
 3.2 Reset
 3.3 Save

4:It is allocated for the image file.

 4.1 Button to browse and add file

 4.2 Button to remove displayed image

5:Tree menu

 5.1 Index1

o 5.1.1 Content 1:Displays relevant content. Right-click provides option to add

new content at the same level.
o 5.1.2 Content 2

32
  5.2 Index2

6.Menubar

 6.1 File
o 6.1.1 New
o 6.1.2 Open
o 6.1.3 Save
o 6.1.4 Close

 6.2 Insert

o 6.2.1 PDF frame

o 6.2.2 Video frame
o 6.2.3 Image frame
o 6.2.4 Audio frame

 6.3 View

o 6.3.1 Developer view

o 6.3.2 User view

 6.4 Help

33
EFFORT ESTIMATION

For a given set of requirements it is desirable to know how

much it will cost to develop the software and how much time the development
will take. The primary reason for schedule estimation is cost benefit analysis ,and
project monitoring and control. Effort and schedule estimates are also required to
determine the staffing level for a project during different phases.

A man-hour is the amount- amount of work performed by an average

worker in one hour.It is used in written "estimates" for estimation of the total amount of
uninterrupted labour required to perform a task

34
Gnatt chart for effort estimation in Man-Hours

Interface and HCI design 30-35 man-hours

Detailed design 70-75 man-hours.

Coding-55-60 man-hours

Testing-40-45 man-hours

Implementation-30-35 man-hours

The estimated time is totally based on assumptions are likely to be changed

depending on the requirements and the development team associated.

CONCLUSION

The proposed system is intuitive and convenient by interactively updating the

document as and when required through user’s control, but further developments can be
made.

. The template can be used to introduce the PDF,Audio,Video or images

dynamically so that the user is provided with the template where he can add or view his
required data browsing the files, avoiding static sections. Here we provide an option to
add only PDF, video ,audio and a whiteboard application but other documents can also be
inserted as required. The Whiteboard can be used to introduce an Internet Relay Chat
where the users, from different parts of the world can actively participate in the online
tutorials or chat sessions.

35
BIBLIOGRAPHY

The information regarding whiteboard was gathered from

[1] www.groupboard.com.
[2] wikipedia.org/wiki/Interactive_whiteboard
[3] Education week’s digital directions:interactive whiteboard.

The information regarding methodology was gathered from

[1] http://help.adobe.com/en_US/Dreamweaver/10.0_Using/index.html
[2] http://www.adobe.com/devnet/dreamweaver/articles/dwcs4_getting_started.html
[3] http://www.thesitewizard.com/faqs/youtube-video-dreamweaver.shtml

Books helpful were:

[1] Dreamweaver CS4 for dummies

[2] Dreamweaver CS4 Bible
[3] Principles Of Multimedia by Ranjan Parekh

36