a pattern language for the moodle e-learning platform

Fachbereich 03: Mathematik/Informatik

A Pattern language for the Moodle E-Learning

Platform

Master Thesis for Digital Media

By:

Pardis Alizadeh

Supervisor:

Prof. Dr. Karl-Heinz Rödiger

Dr. Dieter Müller

Registration date: March 10th, 2012

Submission date: October 9th, 2012

A Pattern language for the Moodle E-Learning Platform

i | P a g e

I hereby declare that I have created this work completely on my own and used no other sources or

tools than the ones listed, and that I have marked any citations accordingly.

Pardis Alizadeh

Bremen -9 Oct 2012


ii | P a g e

Contents

1. Introduction ......................................................................................................................................... 1

2. Design Patterns .................................................................................................................................... 4

2.1. Background .................................................................................................................................. 4

2.1.1. Design Pattern in Architecture .............................................................................................. 4

2.1.2. Design Pattern in Computer science ..................................................................................... 4

2.2. Framework of HCI Design Patterns .............................................................................................. 5

2.2.1. Name .................................................................................................................................... 6

2.2.2. Ranking ................................................................................................................................ 6

2.2.3. Illustration ............................................................................................................................ 6

2.2.4. Problem or forces.................................................................................................................. 6

2.2.5. Description and Example ...................................................................................................... 7

2.2.6. Solution ................................................................................................................................ 7

2.2.7. Diagram ................................................................................................................................ 7

2.2.8. Context and References ........................................................................................................ 9

2.3. Why HCI Design Pattern languages? ........................................................................................... 9

3. Moodle E-Learning environment ....................................................................................................... 11

3.1. The Moodle philosophy .............................................................................................................. 11

3.2. The Moodle experience .............................................................................................................. 12

3.2.1. The Moodle Front Page ...................................................................................................... 12

3.2.2. Course Screen ..................................................................................................................... 14

3.2.3. Editing mode ...................................................................................................................... 16


iii | P a g e

3.2.4. Resources and Activities ..................................................................................................... 18

2.1.1. The Settings Block.............................................................................................................. 19

3.3. The Moodle architecture and data............................................................................................... 20

3.3.1. The Moodle application directory ....................................................................................... 20

3.3.2. The Moodle data directory .................................................................................................. 21

3.3.3. The Moodle database .......................................................................................................... 21

3.3.4. Moodle plug in ................................................................................................................... 22

4. Related Work ..................................................................................................................................... 25

4.1. Research on HCI Design Pattern Languages .............................................................................. 25

4.1.1. General ............................................................................................................................... 25

4.1.2. E learning ........................................................................................................................... 27

4.2. Works on the HCI design for Moodle ......................................................................................... 28

4.2.1. Splash theme ....................................................................................................................... 28

4.2.2. Aardvark theme .................................................................................................................. 29

4.2.3. Aardvak Post-It theme ........................................................................................................ 30

4.2.4. Flexi_ii theme ..................................................................................................................... 31

4.2.5. Lagomorph Theme ............................................................................................................. 32

4.2.6. Mymobile Theme ............................................................................................................... 33

4.3. Discussion .................................................................................................................................. 34

5. The pattern develop ........................................................................................................................... 35

5.1. Identifying user........................................................................................................................... 35

5.2. Identifying Problems .................................................................................................................. 36


iv | P a g e

5.3. The Pattern Language ................................................................................................................. 37

5.3.1. JUMPING PAGE (S 01) ..................................................................................................... 40

5.3.2. USER PAGE (S 02) ............................................................................................................ 41

5.3.3. PRINT PAGE (P 01) .......................................................................................................... 43

5.3.4. MOBILE PAGE (M 01) ..................................................................................................... 45

5.3.5. LOGIN PANEL (S 11) ....................................................................................................... 46

5.3.6. CLEAR ENTRY POINT(S 22) .......................................................................................... 48

5.3.7. BROWS (S 23) ................................................................................................................... 50

5.3.8. PERSONALIZE (S 24) ....................................................................................................... 51

5.3.9. MOVABLE PANEL (S 25) ................................................................................................ 53

5.3.10. SETTING PANEL (S 26) ............................................................................................... 55

5.3.11. TOP NAVIGATION BAR (S 27) ................................................................................... 57

5.3.12. LOGO SCAPE HATCH (S 28) ...................................................................................... 59

5.3.13. FAT MENU(S 29) .......................................................................................................... 60

5.3.14. FOOTER NAVIGATION(C 02) .................................................................................... 62

5.3.15. FLUID LAYOIT (C 01) ................................................................................................. 64

5.3.16. PRINT FONT (P 11) ...................................................................................................... 66

5.3.17. VISUAL STREAM (C 03) ............................................................................................. 68

5.3.18. VERTICAL COLLUMN (M 11) .................................................................................... 70

5.3.19. LOGO STREAM (C 04) ................................................................................................. 71

5.3.20. Application pattern language .......................................................................................... 73

6. The Application of pattern language .................................................................................................. 79


v | P a g e

6.1. Application path ......................................................................................................................... 79

6.2. Application of Screen and Print patterns .................................................................................... 79

6.2.1. LOGIN PANEL application ............................................................................................... 80

6.2.2. FIRST STEP BLOCK application ...................................................................................... 80

6.2.3. JUMING PAGE application: .............................................................................................. 81

6.2.4. LOGOBOX application ...................................................................................................... 82

6.2.5. LOGO HATCH SCAPE ..................................................................................................... 83

6.2.6. FOOTER NAVIGATION................................................................................................... 83

6.2.7. RENDERER ....................................................................................................................... 84

6.2.8. CUSTOM MENU and FAT MENU application ................................................................. 85

6.2.9. TOP NAVIGATION application ........................................................................................ 85

6.2.10. BROWS application ....................................................................................................... 85

6.2.11. ADMINSTRATOR SETTING ....................................................................................... 86

6.2.12. USER SETTING ............................................................................................................ 87

6.2.13. PERSONALIZE ............................................................................................................. 87

6.2.14. CLEAR ENTRY POINT ................................................................................................ 87

6.2.15. PRINT STYLESHEET ................................................................................................... 88

6.2.16. PRINT FONT ................................................................................................................. 88

6.2.17. PRINT PAGE ................................................................................................................. 89

6.3. Application of Mobile patterns ................................................................................................... 89

6.3.1. VERTICAL COLUMN application: ................................................................................... 90

6.3.2. FOOTER NAVIGATION application ................................................................................ 91


vi | P a g e

6.3.3. VISUAL STREAM application .......................................................................................... 91

6.3.4. MOBILE PAGE application: .............................................................................................. 91

7. Conclusion and future works ............................................................................................................. 93

7.1. Conclusion .................................................................................................................................. 93

7.2. Future works ............................................................................................................................... 93

8. Appendix A ....................................................................................................................................... 95

8.1. INCREMENTAL STRUCTURE(S 21) ...................................................................................... 95

8.2. Application of pattern INCREMENTAL STRUCTURE ............................................................ 97

8.2.1. Topics Format of Moodle course: ....................................................................................... 97

8.2.2. Problem on the programming the Topics format of Moodle course .................................... 97

9. Appendix B ...................................................................................................................................... 100

10. Bibliography ................................................................................................................................. 101

11. Online resouces ............................................................................................................................ 104


vii | P a g e

Figures

FIGURE ‎2-1: STREET CAFE PATTERN (ALEXANDER & ETAL, 1979, PP. 436-439) ...................................... 8

FIGURE ‎3-1: STANDARD VIEW OF MOODLE FRONT PAGE ........................................................................... 13

FIGURE ‎3-2: LOG IN PAGE .......................................................................................................................... 13

FIGURE ‎3-3: COURSE PAGE ......................................................................................................................... 14

FIGURE ‎3-4: MY PROFILE ............................................................................................................................ 15

FIGURE ‎3-5: SETTING BLOCK WITH ABILITY TO TURN EDITING ON ............................................................. 16

FIGURE ‎3-6: NORMAL MODE FIGURE ‎3-7: EDITING MODE ......... 16

FIGURE ‎3-8: EDIT THE COURSE BLOCK ....................................................................................................... 17

FIGURE ‎3-9: RESOURCES AND ACTIVITIES LIST.......................................................................................... 18

FIGURE ‎3-10: URL EDITING WINDOWS ....................................................................................................... 19

FIGURE ‎3-11: THE SETTING MENU OF THE TEACHER ................................................................................... 19

FIGURE ‎3-12: STANDARD MOODLE APPLICATION DIRECTORY.................................................................... 21

FIGURE ‎4-1: THE SCREENSHOT OF SPLASH THEME ..................................................................................... 29

FIGURE ‎4-2: FRONT PAGE OF THE NEWBURY-COLLEGE WHICH USE AARDVARK THEME ........................... 30

FIGURE ‎4-3: AARDVAK POST-IT THEME SCREENSHOT ............................................................................... 31

FIGURE ‎4-4:FLEX_II THEE SCREENSHOT ..................................................................................................... 32

FIGURE ‎4-5:LAGOMORPH THEME SCREENSHOT .......................................................................................... 32

FIGURE ‎4-6: MY MOBILE THEME SCREENSHOT ........................................................................................... 33

FIGURE ‎5-1: MOODLE E LEARNING PLATFORM PATTERN LANGUAGE GRAPH ........................................... 39

FIGURE ‎5-2: MOODLE PLATFORM OF WUPPERTAL UNIVERSITY ................................................................. 40

FIGURE ‎5-3: THE USER PAGE OF YAHOO..................................................................................................... 42


viii | P a g e

FIGURE ‎5-4: THE SCREEN AND PRINT PAGE OF UNIVERSITY BREMEN ........................................................ 44

FIGURE ‎5-5: THE SCREEN AND MOBILE INTERFACE OF DESIGN2LEARN E LEARNING PLATFORM .............. 45

FIGURE ‎5-6: THE LOG IN PANEL OF SLIDESHARE WEBSITE .......................................................................... 47

FIGURE ‎5-7: WEBSITE OF UX PATTERNS EXPLORER .................................................................................. 49

FIGURE ‎5-8: MULTIPLE BROWSING AND NAVIGATION IN DESIGN2 LEARN WEBSITE ................................... 50

FIGURE ‎5-9: PERSONALIZE THE HOME PAGE OF DESIGN2LEARN E LEARNING PLATFORM .......................... 52

FIGURE ‎5-10: THE MOVEABLE PANEL OF AARDVARK POST-IT THEME ...................................................... 55

FIGURE ‎5-11: THE SETTING PANEL OF IGOOGLE ......................................................................................... 56

FIGURE ‎5-12 : TOP NAVIGATION OF AARDVARK THEME .......................................................................... 58

FIGURE ‎5-13 : THE LOGO OF THE AMAZON ............................................................................................... 59

FIGURE ‎5-14 : THE FAT MENU OF MICROSOFT WEBSITE ........................................................................... 61

FIGURE ‎5-15: THE HEADER AND FOOTER NAVIGATION OF THE BLACKBOARD SITE .................................... 63

FIGURE ‎5-16: THE FLUID LAYOUT OF THE IGOOGLE ................................................................................ 65

FIGURE ‎5-17: THE PRINT PAGE OF UNIVERSITY OF BREMEN ...................................................................... 67

FIGURE ‎5-18: THE JETBLUE WEBSITE VISUAL STREAM .............................................................................. 68

FIGURE ‎5-19: THE MOBILE INTERFACE OF THE AMAZON ............................................................................ 70

FIGURE ‎5-20: THE NORMAL AND MOBILE SCREEN OF THE EBAY ............................................................... 72

FIGURE ‎6-1: MAIN STRUCTURE OF SCREEN INTERFACE .............................................................................. 79

FIGURE ‎6-2: LOGIN PANEL APPLICATION ................................................................................................ 80

FIGURE ‎6-3: FIRST STEP BLOCK APPLICATION WHICH WAS DISAPPEARED AFTER LOGIN ....................... 81

FIGURE ‎6-4:JUMPING PAGE APPLICATION .............................................................................................. 82

FIGURE ‎6-5:LOGO HATCH SCAPE APPLICATION .................................................................................... 83


ix | P a g e

FIGURE ‎6-6:FOOTER NAVIGATION APPLICATION ................................................................................. 83

FIGURE ‎6-7: TOP NAVIGATION PATTERN APPLICATION ......................................................................... 85

FIGURE ‎6-8: BROWS PATTERN APPLICATION ............................................................................................ 86

FIGURE ‎6-9:ADMINSTRATOR SETTING PATTERN APPLICATION ........................................................... 87

FIGURE ‎6-10:USER SETTING PATTERN APPLICATION .............................................................................. 87

FIGURE ‎6-11:CLEAR ENTRY POINT PATTERN APPLICATION .................................................................. 88

FIGURE ‎6-12: PRINT PAGE PATTERN APPLICATION .................................................................................. 89

FIGURE ‎6-13: MAIN STRUCTURE OF MOBILE INTERFACE ........................................................................... 90

FIGURE ‎6-14:SCREEN SHOT OF THE MOBILE THEME FOR THIS THESIS ........................................................ 91

FIGURE ‎6-15:MOBILE PAGE PATTERN APPLICATION ............................................................................... 92

FIGURE ‎8-1: SCREEN SHOT OF MICROSOFT WORD 2010 .............................................................................. 95

A Pattern language for the Moodle E-Learning Platform Introduction

1 | P a g e

1. Introduction

In the past few decades, the computer and internet technology are rapidly developed and this

development has significant effect on the teaching and the learning approaches. The process

becomes rapid when the educator started to use the internet and E- Learning tools and supplied

new genera of the education.

The concept of the E-Learning was accepted with higher education very fast and they employ the

new web-based technology for teaching their courses online meanwhile the fast growing process

in the hardware and software has facilitate it.

The adaptation of the E-Learning technology in high education presents new approaches and

tools for teaching and learning and transforms the ways that teachers teach and students learn.

This movement presents new opportunity for the student to advocate their learning process while

the teachers have the roles of conducting the context and guiding the student. The teachers are

forced to modify the context and methodology of the teaching in the way that can make

advantage of the online technology as well as students have to be actively participate on the

collaboration learning process.

By increasing the request of E-learning in the academic environment, the various companies have

started to developed different E-Learning platforms. Over recent years, they present very much

simple or sophisticated platforms for example WebCT, Blackboard, and TopClasse; Moodle,

Ilias, and Claroline. While there are commercial platforms, a few communities started to develop

free and open sources software.

The most common used tools within free and open source software is the Moodle. In 2011,

Moodle was used in 211 countries, and can be applied into 78 languages with 41.5 million users

(Escobar-Rodriguez & Monge-Lozano, 2012).

Since the Moodle is publicity accepted in the High educations, there is a community of the

developer which working on the extent of the platform but, due to the diversity in the Moodle

official website –where you can find all the documentation on the Moodle- it becomes difficult to


2 | P a g e

keep track of all publications and products in this platform as well as the study in existing

Moodle interfaces shows that there is gaps and slots which should be work on.

This master thesis tries to present a HCI design pattern language for Moodle E-Learning platform

to fill these gaps by identifying the problems in the Moodle and gathering solutions and providing

the framework for the design in the pattern languages style in order to help the Moodle

community for improving their existing systems.

This thesis was outlined based on the following structure:

Chapter 1: Design Patterns

This chapter explains the background of the Pattern in different domain; from architects until

HCI designers then it defines the framework and structure of the pattern and explains the

advantage of the pattern languages to other guidelines.

Chapter 2: Moodle

This chapter focuses on the Moodle platform and explains Moodle origin and philosophy and

basic structure of the interface and architecture of the platform and its theme plugin.

Chapter 3: Related Work

This chapter has two sections. In the first part, the attempt is focusing on the HCI Design Pattern

Languages in general and E Learning domain since the second part presents the existing themes

which designed for Moodle platform.

Chapter 4: The Pattern Development Process

In this chapter, the attempt is on the identifying the user needs and problem on the Moodle. It

contains the general pattern development methodology and format which was used to create the

pattern and it is preceded by the pattern graph and an explanation of the pattern categories.

Chapter 5: The Pattern Language in application


3 | P a g e

This chapter contains the application evidence which was tried to evaluated the patterns in the

theme application of the Moodle

Chapter 6: Conclusions and Future Work

The final chapter is a summary of the contents and it concludes the presented work in this thesis.

And also there is an outlook of the next steps to improve the Moodle pattern language and its

application.

A Pattern language for the Moodle E-Learning Platform Design Patterns

4 | P a g e

2. Design Patterns

2.1. Background

2.1.1. Design Pattern in Architecture

The concept of the pattern design languages was suggested by the architects and the original

idea was proposed by Alexander in 1960s .He was not satisfy with the way of modern architectes

working then he started to search for guidelines and standards which offer the human centered

design‎ principles.‎ He‎ believed‎ that‎ design‎ pattern‎ “is‎ a‎ process‎ through‎ which‎ the‎ order‎ of‎ a‎

building or a town grows out directly from the inner nature of the people, and the animals, and

plants, and matter‎which‎are‎in‎it…….‎It‎is‎so‎powerful‎and‎fundamental‎that‎with‎its‎help‎you‎

can‎make‎any‎building‎in‎the‎world‎as‎beautiful‎as‎any‎place‎that‎you‎have‎ever‎seen”‎(Alexander

C. , 1979, p. 7)and in 1979 he‎wrote‎a‎“a‎pattern‎language”‎book‎which‎provides‎the‎guidelines‎

and framework for pattern languages and he explained pattern as a description of a problem

which occurs over and over again in our environment, and then he described the core of the

solution to that problem, in such a way that the designers can use this solution a million times

over, without ever doing it the same way twice. (Alexander& etal , 1979, p. x).

2.1.2. Design Pattern in Computer science

2.1.2.1. Software Engineer

The pattern design idea was caught up with computer scientists in the 1980s and they translated

the pattern languages idea to the computer science. Beck and Cunningham (1978) was the first

computer scientists who presented a set of patterns and their experience from using pattern in

computer science area‎ at‎ the‎ OOPSLA’87 conference but most significant collection was

presented by the Gamma and his group (1994) .This collection contained 23 patterns for solving

the problems which happened during programming. (Gamma & etal, 1994).Their work has

opened a new perspective for many programmers and a chain of workshops .The Plop (Pattern

Languages of Programming) is most prominent of them which is widely known and accepted in

the software engineer community but computer scientists used different method from the way


5 | P a g e

which was presented by Alexander and he (1996) clearly exposed it in his keynote at

OOPSLA96. He told that he disagreed with computer scientist proposal and the way which they

adapted his idea for computer science domain.

However,‎ Alexander‎ didn’t‎ accept‎ computer‎ scientist‎ method;‎ the design patterns gives new

direction for computer scientist experts for solving the problem,

2.1.2.2. Human-Computer Interaction

In the HCI domain, the pattern language was initially presented by Norman and he (1990) tried to

transfer the idea of the pattern to HCI domain in order to find a guideline and standards. He

(1990) mentioned‎ that‎ the‎ Alexander’s‎ pattern‎ language‎ could be translated to HCI domain,

Although, there are differences between the nature of Architecture and HCI, for instance:

building have static features and Alexander categorize his pattern according to special

categorization, from town to detail construction , in the HCI domain, there is the user as the

dynamic factor who introduces the time dimension in addition to the two or three dimension of

space.

The‎next‎step‎was‎done‎ in‎ the‎PLoP‎’98‎conference‎by‎Tidwell (1998) , with considering user

issues, she presented the first comprehensive set of patterns for HCI and the in the 2001,

Borchers came with the comprehensive sets of pattern languages for interactive music exhibitions

while he tried to make links between theory and application in the HCI pattern languages.

2.2. Framework of HCI Design Patterns

The framework of the pattern design is conducted by several workshops and conferences in HCI

and they tried to give general guideline according to the original work of Alexander (Figure 1-1).

In the process of pattern design, it is important to consider the every pattern elements then here is

a try to‎look‎into‎the‎details‎of‎a‎typical‎HCI‎design‎pattern’s‎elements,‎based‎on‎the‎Alexander‎

(1979)(Figure 1-1) as well as Borchers (2001) proposal.


6 | P a g e

2.2.1. Name

The‎name‎gives‎first‎as‎well‎as‎short‎idea‎about‎the‎solution‎that‎the‎pattern‎proposes.‎It‎shouldn’t‎

be very long and the length of two to four words is good. As a wrong name can result in a

complete misunderstanding of the pattern, the process of choosing good and right name is very

important and difficult.

For making the stress on the patterns name, it should be written in small caps .E.g. STREET

CAFE (Alexander & etal , 1979) or EASY HANDOVER (Borchers, 2001) and also most

languages assign a unique identifier (ID) to every pattern, consisting of digits, an alphabetical

collection prefix, or a combination of both.

2.2.2. Ranking

Every pattern often has a ranking in order to illustrate the usefulness and applicability, for

example Alexander (1979) used zero to two stars, as zero stars was given to a solution that is

currently the best , but there will be probably better solutions possible in further investigation. On

the contrary, a two-star pattern is a sustainable and likely ideal solution for the specific problem.

2.2.3. Illustration

The illustration gives a more general idea as long as the name provides the solution idea to the

pattern users. It works as sensible example or an illustration presents a situation where the pattern

might be applied or has been applied already.

2.2.4. Problem or forces

The problem statement should be printed in bold. At first glance, this might be easy to find, but

identifying a good problem statement is difficult and critical. One of the core ideas which

Alexander (1979) proposed,‎ are‎ the‎ “conflicting‎ forces”.‎ Forces are problems that works in

certain solutions, but compete with each other. The solution proposed in the pattern has to


7 | P a g e

balance these conflicting forces, and the better solutions are result in the identified forces and the

better solution therefore in the pattern. This part is a central one in HCI design pattern and many

argue that the forces are the most important element of a pattern. The bold-printed problem

statement‎ in‎ Alexander’s (1979) pattern STREET CAFE, depicted in Figure 1-1, shows an

example for conflicting forces.

2.2.5. Description and Example

The biggest section of a pattern is the problem description. It stresses on the conflicting forces

which mentioned in the problem statement and name and also it contains the examples for

explaining the forces. The example may show empirical evidences for the solution. Borchers

(2001) calls‎this‎the‎“inductive‎approach”,‎due‎to‎the‎examples‎stated‎first‎and‎inducing‎a‎general‎

solution for the problem.

2.2.6. Solution

Solution started with‎ the‎ “therefore”‎ keyword.‎ The‎ bold-printed solution statement provides a

clear instruction for the user to how apply the pattern. It is broad enough to convey all scenarios

mentioned in the context as well as specific that the designer knows what to do without much

further reading .A good solution statement should be short, precise, and motivates the user to

solve a problem with pattern and create an actual implementation of the solution which is even

better than the examples listed in the pattern.

2.2.7. Diagram

The diagram is the solution idea which usually was done by hand drawing. (Alexander & etal,

1979) (Borchers, 2001) And also it is often give general idea rather than being too specifics.


8 | P a g e

Figure ‎2-1: STREET CAFE pattern (Alexander & etal, 1979, pp. 436-439)


9 | P a g e

2.2.8. Context and References

The contexts are the first part and references are the last part of the pattern. In this parts, it should

be go more into detail about the specific application process and reveal possible problem which

can be happen and also should be mentioned the name of other patterns which directly link for

this pattern. These links are the specific feature that they make distinguish between pattern

languages and pattern collection.

2.3. Why HCI Design Pattern languages?

The HCI designers have used a lot of prominent guidelines and frameworks for different

proposes, for example the Seven stages of Action which was offered by Norman (1990),the

Marcus’s‎ tutorial‎ on‎ the‎ online‎ interfaces (1991), the Eight Golden Rules of interface design

(Shneiderman & Plaisant, 2010) , the Macintosh Human Interface Guidelines by Apple

Computer Inc. (1992)and the Microsoft OS framework by Microsoft Corporation (2010) can be

consider.

Althoght the pattern languages are less known than other guidelines and standards, they have a

lot of advantages which motivated the author to choose it as a guideline in this thesis.

Other HCI design guidelines often present a solution for specific problem or provide general

framework for implementation of solution and it will be useless when the designer has problem

which was not fit in this particular scenarios but Pattern languages provide the solution in

context, it means that they present the relevant scenarios where the mentioned problem will

appear and its suitable solution (Dearden & Finlay, 2006).

The connectivity of the pattern languages- as Alexander (1979, p. 314) stated‎“In‎this‎network,‎

the links between the patterns are almost as much a part of the language as the patterns

themselves”- may help the designer to follow up the links in its context and reference and it will

be helpful in browsing and selecting patterns. The consistent format and structure of the pattern

language makes it also easy to read and search for relevant pattern and also make it re-usable.


10 | P a g e

This feature will be very helpful in development of Moodle interfaces as there is collaboration

with multiple design teams where different solutions proposed for the one problem by different

design groups that it will direct to inconsistent interfaces among designs produced in the one.

Contrast to the scientific context, the pattern languages can be used easier as it uses readable

languages. As Alexander (1979, p. xli) mentioned, it should be written in prose. This feature of

the pattern makes it more motivation for reading and this will increase the value of the pattern

language as well. It will be very useful for Moodle community where they have a lot of users

who are not professional computer scientist.

The interface designers often work in an interdisciplinary team and typically, there were be a

problem of common terminology for exchanging designs ideas. The possibility to combine

pattern languages from different domains to create an interdisciplinary design pattern framework

(Borchers, 2001), will support and cover the communication gap among team members by

providing a common languages while explaining the design solutions.In the E learning area it will

be effective as there are a lot of users from different area -the computer scientist until pedagology

expersts- who are working parallel with each other.

The‎opportunity‎to‎“think‎outside‎the‎box” (Tidwell, 2011, p. xiv),‎the‎“participatory design”‎and‎

“technical lexicon” (Dearden & Finlay, 2006, p. 30 & 31) are another feature of the pattern

languages which make it difference from other methods as a method for Moodle platform.

And‎also‎the‎pattern‎languages‎are‎rooted‎on‎“a‎history‎of‎the‎successful‎usage‎[then]‎their‎use‎

can make the web application usable because interactions afforded by patterns would be familiar

to‎users.”‎(Vora, 2009, p. 10) .

A Pattern language for the Moodle E-Learning Platform Moodle E-Learning environment

11 | P a g e

3. Moodle E-Learning environment

“The‎ word‎ Moodle‎ was‎ […] an acronym for Modular Object-Oriented Dynamic Learning

Environment,‎ which‎ is‎ mostly‎ useful‎ to‎ programmers‎ and‎ education‎ theorists.” (About

Moodle)And‎originally,‎“It's‎also‎a‎verb‎that‎describes‎the‎process‎of‎lazily‎meandering‎through‎

something, doing things as it occurs to you to do them, an enjoyable tinkering that often leads to

insight‎and‎creativity”.‎(About Moodle)

Moodle in education and computer science area was recognized as an open source software

package which was produced web-based‎ learning‎environment‎ in‎ the‎ framework‎of‎ the‎“social‎

constructionist‎“ (About Moodle) education.

This software can be installed on any computer which has PHP and support SQL type database

and‎also‎it‎can‎run‎almost‎on‎all‎operating‎systems‎(Windows,‎Mac‎and‎etc.….)

3.1. The Moodle philosophy

As mentioned above, the Moodle has been design for supporting the Social Constructionism

learning style, The social constructionist philosophy believes (Atwater, 1996) that the

interactivity will helped and improved the learning process. The social constructionist stressed

that people learn best when they interact with the learning material, construct new material for

others, and interact with other students about the material.

However,‎Moodle‎is‎a‎tool‎for‎supporting‎this‎learning‎method,‎It‎doesn’t‎means‎that‎Moodle just

support this kind of the education style .It also allows to users to create static learning context

which can be just readable for student without interacting as well , for example:

Web pages

Links to anything on the Web (including material on your Moodle site)

A directory of files


12 | P a g e

A label that displays any text or image

However, Moodle also allows users to add interactive learning material. For example:

Assignment (uploading files to be reviewed by the teacher)

Lesson (a conditional, branching activity)

Quiz (an online test)

Moodle also provide activities where students interact with each other. These are used to create

social course material:

Chat

Forum

Wiki

Workshop

In addition, the open source nature of Moodle allows the user to create and add modules for

increasing types of interaction. (This module can be finding in the Moodle official website1)

3.2. The Moodle experience

3.2.1. The Moodle Front Page

The Front Page of the site is the first page that most visitors will see and the Moodle provides the

opportunity to force the visitor to register and log in before entering to main page and also it just

allows to an anonymous visitor to see limited information about the site on the Front Page

1 http://moodle.org/plugins


13 | P a g e

Figure ‎3-1: Standard view of Moodle Front page

The available courses list, Main menu and Navigation are the standard block which was

configured in standard installation of Moodle (And also it can be modified by user later)

The selecting one of these activities will require to register with the site, as shown in the figure 3-

2.

Figure ‎3-2: Log in Page

3.2.1.1. Anonymous, guest, and registered access

Moodle gives three levels of access to site, and for individual courses:


14 | P a g e

Anonymous access allows anyone to see the contents of Front Page but there is no

Anonymous access for courses. Even if a course is open to Guests, the visitor must either

manually log in as the user Guest, or the admin must configure the site to automatically

log in a visitor as Guest.

Guest access

Registered access requires the user to register on site. The role of the registered user was

allocated by admin as Administrator, course creator, teacher and student

3.2.2. Course Screen

Available courses block is directly accessible from the front page. If the course allows

anonymous/Guest access then the user directs into course otherwise to the login screen.

The Moodle user allows to organize his course in the different methods, the default method is

organization according to the weeks and also the users can change it to the discussion forums.

And it is possible for the teacher users to hide and show topics or open and close the resources

and activities as well.

Figure ‎3-3: Course page


15 | P a g e

In the Figure 3-3, the user has logged in as student and entered in the basic test course. The user

found out his place from the breadcrumbs trail in the upper-left corner of the screen, which tells

him the name of the site and the name of the course. In the upper-right corner of the screen, the

user sees a confirmation that the user has logged in.

Course page also uses various Blocks. The most prominent is the Navigation Block on the left

and the setting block‎ on‎ the‎ bottom‎ of‎ navigation‎ and‎ the‎ “Search‎ forums”,‎ “Latest‎ news”,‎

“Upcoming‎events”‎and‎“Recent‎ activity”‎ is‎ also‎another‎blocks‎which‎ is‎ included‎ in‎ standard‎

installation.(Figure 3-3)

The Navigation block shows users where they are and can go, the site’s‎Home‎page‎is‎on‎the‎top‎

of the Navigation Block. The My Home- the‎student’s‎home‎page- placed on the bellow of Home

page. In the My Home, the user will find the courses which they enrolled or the activity which

they have done.

The‎student’s‎profiles‎link is also in the Navigation block. The profile is place where the user will

find comprehensive information about the users.E.g. Contact information, picture of the user and

so on. (Figure 3-4)

Figure ‎3-4: My profile


16 | P a g e

If the course will defined as the forum the users can join the discussion by clicking on course

discussion. However, the teachers have editing right on the forums as well as they can delete the

discussion post or rate it.

As Interactivity is main goal of the Moodle, The students also can have permission to rate the

forum posts or activities which done by other students.

3.2.3. Editing mode

When the users log in with the Administrator, the course creators and the teachers roles, they

have permission to edit the pages and they can turn on the editing mode just by clicking on the

“turn‎editing‎on”‎button‎on‎the‎setting‎block‎(Figure‎3-5). While the user turn the editing Moodle

on, a group of the icon will appear on top of the blocks: Editing icon, Hide icon and Group icon.

(Figure: 3-7)

Figure ‎3-5: Setting Block with ability to turn editing on

Figure ‎3-6: Normal Mode Figure ‎3-7: Editing mode


17 | P a g e

2.1.1.1. The Editing icon

The Edit icon allows the users to edit the block where click on the Edit icon. The figure 3-8

shows the course editing page after clicking the Edit icon.

2.1.1.2. The Hidden/Shown icons

The Hide icon is‎ useful‎ for‎ the‎ teachers‎when‎ they‎ don’t‎want‎ to‎ remove‎ any‎ item‎ from‎

platform but want it to be invisible or Hide from the student then they can do it simply just by

clicking on this icon. This ability will work while the teacher is working on the material or want

to‎use‎it‎later‎but‎want‎to‎keep‎it‎on‎the‎platform‎and‎don’t‎want‎to‎be‎seen‎by students.

Figure ‎3-8: Edit the course block


18 | P a g e

2.1.1.3. The Group icons

The Group icon can control the group accessibility to specific task. The Moodle have feature

that can control the access to items by the groups and clicking on this icon will allow the users to

change this setting.

3.2.4. Resources and Activities

“Course‎material‎ that‎ a‎ student‎ observes‎ or‎ reads,‎ such‎ as‎web‎ or‎ text‎ pages,‎ hyperlinks,‎ and‎

multimedia files—are called Resources. Course material that student interacts with, or that

enables‎interaction‎among‎students‎and‎teachers,‎are‎called‎Activities.” (Rice, 2011, p. 26)

When the editing mode is turn on, the users can add Resources and Activities to a course. For

instance: Chat, File, Wiki, Quiz, and Forum and so on.

2.1.1.4. Adding Resources and Activities

The user simply can add them by clicking on the drop-down list of a resource and an activity and

choose from list.

Figure ‎3-9: Resources and Activities List

After selecting, the user will process to the Editing menu which is specific for each activity or

resource. Figure 3-10‎ showing‎ the‎URL‎ adding‎windows.”‎Notice‎ that‎ the‎ users‎ can‎ do‎much‎


19 | P a g e

more than just specify a hyperlink. They can give this link a user-friendly name, a brief

description;‎open‎it‎in‎a‎new‎window,‎and‎more.” (Rice, 2011, p. 26)

2.1.1. The Settings Block

The setting Block is placed on the bottom of the Navigation block and its full contents are just

displayed when the user log in with the administrator roles. The Figure 3-11 shows the

administrator setting menu options.

Figure ‎3-10: URL editing windows

Figure ‎3-11: the setting menu of the teacher


20 | P a g e

3.3. The Moodle architecture and data

Moodle‎ runs‎ on‎ the‎web‎ servers‎which‎ supporting‎ PHP‎ and‎ SQL‎ type‎ database‎ “and‎ there‎ is‎

more support, when running on the Apache web server with a MySQL database. These things,

Apache, PHP, and MySQL are common to almost all commercial web hosts, even the lowest cost

ones.” (Rice, 2011, p. 29)

The Moodle platform files are placed in three places on the server:

The main application directory with many subdirectories for different modules.

The upload files which were uploaded by student and teacher are placed on the Moodle

data directory.

The Moodle database which was created by administrator and it is full up by the course

material, grades, user information and user logs data.

These three parts of Moodle work together to produce the learning platform and have clear

information of how these parts work together is also helpful when upgrading, troubleshooting, or

moving the site between servers.

3.3.1. The Moodle application directory

The figure 3-13 shows standard Moodle application directory. Each directory has a meaningful

name as the user can easily guess the function of it. For example, the admin directory holds the

PHP code that creates the administrative pages, the Lang directory holds translations of the

Moodle interface and the index.php file is the Moodle home page.

As each component of Moodle has own specific directory, the updating of the Moodle can be

done easily just by replacing the old files with new ones.


21 | P a g e

Figure ‎3-12: standard Moodle application directory

3.3.2. The Moodle data directory

Moodle‎ stores‎ user’s‎ uploading‎ files‎ in‎ a‎ data‎ directory.‎ This‎ directory‎ is not accessible by

general public over the Web ,it means that the user can not be able to type its URL and access it

via web browser.it can be protected either by using an .htaccess file or by placing the directory

outside of the web server's documents directory.

3.3.3. The Moodle database

The Moodle database stores most of the information in Moodle site. The database also stores

objects that the user creates while using Moodle. For example, Moodle enables users to create

web pages for their courses. These web pages' actual HTML code is stored in the database. Links

that the user add to a course, the settings and content of forums and Wikis, and quizzes created

with Moodle, are all examples of data stored in the Moodle database.


22 | P a g e

3.3.4. Moodle plug in

Moodle has optional plugins which were developed by Moodle developer community .They can

add or extent the features, for example, they can add new activity or new report format.

3.3.4.1. The Moodle.2+ theme

The Moodle Themes are plugins that provide the new skin and feel to the Moodle interfaces

while they keep the E learning functionality of the interface.

An administrator user can configure the theme for the site from the setting block and also can

give the ability to different group of the user to change the interface appearance.

The theme folder was placed in the application directory of Moodle and it contained theses files

and folders:

config.php file:

This file contains all configuration and options of the theme. all of the other files and options of

the theme was set in this file e.g. parents, sheets, layouts, and javascripts. The structure of the all

setting in this file was started by $THEME and then come the other themes configuration objects.

For example:

$THEME->layouts = array (frontpage' => array('file' => 'frontpage.php', 'regions' =>

array('side-pre', 'side-post'), 'defaultregion' => 'side-post'))

This example shows a setting for the layout that the array containing the name layout file include

in theme without extension.

lib.php file:

The theme special function and classes were written in this file, for example the function for

writing the customcss was defined here as it can be replaced in css file after customizing by the

user.


23 | P a g e

function PardisMasterThesis_set_customcss($css, $customcss) {

$tag = '[[setting:customcss]]';

$replacement = $customcss;

if (is_null($replacement)) {

$replacement = '';

}

$css = str_replace($tag, $replacement, $css);

return $css;

}

renderers.php file

This file contains special class which grips the output of all components of Moodle and it was set

in the config file as:

$THEME->rendererfactory = 'theme_overridden_renderer_factory';

And extends of this class was written inside of this file as:

class theme_overridetest_core_renderer extends core_renderer {

}

The overridden renderer can also be set directly inside the layout file by calling the html_writer

class and writing the necessary codes inside.

echo html_writer::start_tag('div', array('id'=>'userdetails'));

settings.php file

This file can be found in every other plugins too and adminstor can modify the interface setting in

the theme setting page. Its normal structure is like:

$name = 'theme_PardisMasterThesis/logo';

$title = get_string('logo','theme_PardisMasterThesis');


24 | P a g e

$description = get_string('logodesc', 'theme_PardisMasterThesis');

$setting = new admin_setting_configtext($name, $title, $description, '', PARAM_URL);

$settings->add($setting)

javascript folder

This folder includes all of JavaScript files which was used in the theme and defined in the config

file.

lang folder

The special languages files of the theme were placed in this folder in separated folder for each

language and standard string.

layout folder

It contained the layout file which was written for override on the base layout of the Moodle .It

can be write for the : base, standard, course, coursecategory, incourse, frontpage, admin,

mydashboard, mypublic, login, popup, frametop, embedded, maintenance, print, report pages.

pix folder

All image file which used by theme, was placed in this folder as well as the favicon and a

screenshot of the theme for displaying in the theme section.

style folder

All of the stylesheet fils of the theme which were set in the config file should located in this

folder.

A Pattern language for the Moodle E-Learning Platform Related Work

25 | P a g e

4. Related Work

This part is divided into two different sections. In the first section, the attempt is focusing on the

HCI Design Pattern Languages in general and E Learning domain since the second part presents

the existing themes which designed for Moodle platform.

4.1.Research on HCI Design Pattern Languages

4.1.1. General

The first collection of HCI pattern languages was created by Tidwell (1998) .This collection was

presented as a paper with 9 design patterns collection for desktop HCI and it was refined in many

iterations (Tidwell, 2005) (Tidwell, 2011) and in its last edition, She presents 94 design patterns

in 10 category for desktop user interfaces as well as for web design problems and solutions. As

this collection has constant iteration and improvement, it still has managed to stay valid with

many changes in the technology of user interface design. The second prominent and initial book

on‎ the‎ HCI‎ design‎ pattern‎ is‎ Borchers’s‎ work‎ (2001).This book presented 33 design pattern

which are special for musical exhibition but its value is on not only on the theoretical frame work

which present for HCI design pattern but also in its application cases .Borchers in this book first

,draw the HCI design framework on the Alexander,s structure and then applied the design

patterns in three music exhibition for desktop interfaces.

Web Usability by Graham (2003)with a collection of 79 patterns and The Design of Sites by Van

Duyne and et al. (2006) Containing 107 patterns in 13 categories are two prominent books that

they specified on the websites and online materials. Both of these books have closer view to

Bochers’s‎structure rather than‎the‎Tidwell’s‎patterns.‎Grahama used less illustration and its book

is more text-oriented book but Van Duyne placed a lot of photos in the book as examples and

even he provided hand drawing solution for each pattern.“Web‎ application‎ design‎ patterns”‎ is‎

another work which was written by Vora (2009), this publication consists of 104 design patterns

which are in a layout orientation and more towards the software design pattern format.


26 | P a g e

By publicly using the internet ,the pattern online libraries have been created on HCI design

pattern and they grow up very fast. The printed material cannot be updated fast and also is harder

to brows therefore websites consider more.

The first web site for submitting and discussing the design pattern was started by Van Welie on

the 2000 (Van Welie, 2000).Since 2007, the patterns had been updated in three categories of

(“User‎needs”,‎“Application‎needs”,‎and‎“Context‎of‎design”.‎Yahoo!‎in‎the‎2005‎has‎created‎the‎

Yahoo! Design Pattern Library (Yahoo!, 2005) with similar approaches and their pattern are

categorized in five category of layout, navigation, selection, rich interaction and social. The User

Interface Design Patterns Library (Toxboe, 2008), and the Infragistics Quince UX Design

Patterns Explorer (Infragistics, 2008) are the another websites which following the former

approaches.

It should be mentioned that these websites are more emphasis on the discussion about current

pattern rather than creating new patterns. Their aim is to publish and share the experience of the

pattern application and rate the pattern.

Beside these websites, the HCI design patterns community uses web sites for exchanging the

ideas and tracking of new developments. the three prominent of this sits is : The HCI Patterns

Home Page that lists important news about HCI design patterns (Borchers, 1999), The Pattern

Gallery which present an overview of comprehensive pattern languages published (Fincher,

2000) and The Hillside Group Design Patterns Library which is a large web site which contains

publications from the PLoP conference series and focuses mainly on software engineering, but

also includes some HCI design patterns and is the most active source on design patterns research

(Group, 1997)

Although, These former web sites do not offer any specific pattern language, but rather a

combing and compiling the available work in the field of design patterns.


27 | P a g e

4.1.2. E learning

There is not very much HCI design pattern which was provide guideline for HCI in E Learning

domain. However, most of these attempts is to collect pedagogical patterns (Eckstein & etal,

2002; Goodyear, 2005; Niegemann & Domagk, 2005; Holden, Schadewitz, & Rapanta, 2010

;Pedagogical Patterns Editorial Board, 2012) but just a few work was done on the HCI of E

Learning.

One of the prominent work on the HCI pattern design of E Learning was done by Van Diggelen

and Overdijk (2009) .They‎ presented‎ two‎ design‎ patterns‎ which‎ “guide‎ the‎ design‎ and‎

implementation of a networked learning environment that supports small-group learning in the

classroom”.‎In‎their‎research,,they‎first‎have‎made‎own‎theorical‎fundemantal‎which‎was‎based‎

on‎the‎knowledge‎sources‎on‎‎Alexander‎pattern‎framework.‎These‎bases‎“do‎not‎rely so much on

the knowledge and experience of the individual expert, but rather, they stem from knowledge that

is situated on the level of scientific communities of practice. Design patterns are hereby used to

conceptualize the link between theory and practice” (van Diggelen & Overdijk, 2009) then they

developed the design pattern in networked learning and for this aim,Two design pattern was

offered‎ ‎ for‎ supporting‎ “group‎ discussion‎ in‎ classroom”‎ ,afterward,‎ theses‎ patterns‎ come to

application and they disscuse their expriement during these process.

The second work was done with Kohld and Uttecht (2009),‎ their‎work‎was‎ specific‎ ‎ “on‎ the‎

mining, writing and application of patterns for interactive educational‎graphics”‎and‎mainly,‎they‎

focued on the pattern mining and they tried on the theorical based -which is a method proposed to

find patterns that are shared by other individuals- how to derive patterns from experience and

analysis then they try to improve the quality of written patterns by considering the established

methods of pattern writing. The aim of their research is mostly on document patterns that are

understandable, well-structured,‎ and‎ that‎ capture‎ the‎ expert’s‎ intrinsic‎ knowledge‎ about real

patterns as precisely as possible and at the end they discussed the benefits and applicability of

patterns.


28 | P a g e

4.2.Works on the HCI design for Moodle

The interface of the Moodle was structured by different modules which were controlled by the

themes.

The theme in the other developed interfaces have leverage system which have more controls on

the‎ interface‎ but‎ Moodle‎ doesn’t‎ employ‎ this‎ system‎ and‎ ‎ the‎ theme‎ of‎ the‎ Moodle‎ doing‎

something similar to skinning .

Moodle standard edition is published with a set‎ of‎ free‎ standard‎ themes,‎ however‎ ,‎ they‎ don’t‎

have very much control on, Moodle official2 website also present a small library of free

downloadable themes which are most provided by third-party Moodle theme provider while they

have more further comparing to the stand themes .

This part going to present a few free Moodle themes which have more feature and capability

compare to others.

4.2.1. Splash theme

This theme is designed by Carolline Kennedy by Synergy Learning and it is standard theme

provided by Moodle download.

This theme is fluid-width, three-column theme for Moodle 2.0 and built upon Base and Canvas,

which are two parent themes included in the Moodle core. It also can be customized by logo and

theme colors.

This theme is more elaborating compare to other Moodle package themes but it is still a step

further than skinning.

2 http://moodle.org


29 | P a g e

Figure ‎4-1: The screenshot of Splash theme3

4.2.2. Aardvark theme

The most prominent and celebrating themes for Moodle were designed by Shaun Daubney since

2009 and it was upgraded frequently. The other designers also try to develop this theme and there

are‎a‎lot‎of‎themes‎convey‎the‎name‎of‎the‎Aardvark‎but‎they‎haven’t‎step‎more‎far‎from‎origin.‎

The newest installation of the Aadvark is 2.1.0 version which was applied on the Newbury

College4.

The theme has:

“Profile‎Bar‎with‎personal‎links‎and‎upcoming‎events

Graphic wrapper for background images

Uses custom menu in Moodle core

3 http://moodle.org/plugins/browse.php?list=category&id=3 :retrieved 05.04.2012

4 http://vle.newbury-college.ac.uk :retrieved 05.04.2012

http://moodle.org/plugins/browse.php?list=category&id=3

http://vle.newbury-college.ac.uk/


30 | P a g e

Change colors and elements from settings menu

Auto hide in Edit Mode” (Moodle Plugin Directory, 2012)

Figure ‎4-2: Front page of the newbury-college which use Aardvark theme 5

As well as its reach graphical design and heading menu on the top which give more spaces for

other blocks.

This theme however have very much elaboration and customizing capability compare to other

Moodle‎ themes‎ but‎ ‎ it‎ doesn’t‎ have‎ any‎ print‎ and‎mobile‎ interface‎ as‎well‎ as‎ the‎ fix‎ graphic‎

design background stopped it from any flexibility‎to‎changing‎the‎size‎,‎color‎and‎etc.…‎

4.2.3. Aardvak Post-It theme

This theme was created on the base of Aarvark theme and was developed by Mary Evans.

(Moodle Plugin Directory, 2012).

5 http://moodle.org/plugins/browse.php?list=category&id=3 Retrieved on 05.04.2012



31 | P a g e

This theme contrast to its parent version, it has fluid width and have feature that allows the user

to move blocks to the profile bar and also gives the possibility to customized the background

image for the profile bar as well as title and solid colors.

This theme however have very much elaboration and customizing capability compare to other

Moodle‎themes‎but‎its‎high‎header‎banner‎cover‎a‎lot‎of‎usable‎space‎and‎also‎it‎doesn’t‎have‎any‎

print and mobile‎interface‎as‎well‎its‎former‎doesn’t.

Figure ‎4-3: Aardvak Post-It theme screenshot 6

4.2.4. Flexi_ii theme

This theme was developed based on the Flexi theme by Richard Oelmann. ( (Moodle Plugin

Directory, 2012).This themes give a comprehensive customizing functionality with its setting

page. This setting page allows to the user to customize the skin of the interface .E.g. set

background color or image as well as logo.

This theme‎is‎really‎simple‎skinning‎theme‎and‎doesn’t‎have‎very‎much‎features.


http://moodle.org/plugins/view.php?plugin=theme_flexi_ii



32 | P a g e

Figure ‎4-4:Flex_ii thee screenshot7

4.2.5. Lagomorph Theme

Figure ‎4-5:Lagomorph theme screenshot8


8 http://editconsultants.net/moodle/course/view.php?id=10 Retrieved 10.05.2012


http://editconsultants.net/moodle/course/view.php?id=10


33 | P a g e

This theme, based on ReBase theme of Daniel Wahl, has been developed to provide a basis for a

single theme across a wide variety of screen sizes, from full desktop down to mobile phone by

Richard Oelmann. (Moodle Plugin Directory, 2012)

This allows the page to automatically adjust between 3 column (for larger screen widths), 2

columns (left/main) for smaller screens and a single column where the side-blocks appear under

the main content on the smallest screens.

4.2.6. Mymobile Theme

Mymobile is a theme was design for Mood 2 .It is a theme which customized and optimized for

Mobile users and based on jquerymobile. This Mobile interface can be used by students and

teachers as it provide most of standard activity of the Moodle and also the users have access to

calendar, messages, blocks and resources.

Figure ‎4-6: My mobile theme screenshot9

9 www.moodle.org

A Pattern language for the Moodle E-Learning Platform The pattern develop

34 | P a g e

4.3. Discussion

All the previously discussed design pattern libraries don’t‎have‎direct‎contribution on the research

for the Moodle E learning platforms pattern languages but they will help to illustrate that the

design pattern approach can be a successful solution to create a sustainable body of knowledge,

even for a domain that changes dramatically over time and where new problems continue to

emerge. Second, as mentioned, examples of the pattern languages show existing patterns from

other languages can be altered, updated, and incorporated to other pattern libraries.

The‎current‎Moodle‎theme‎is‎also‎doesn’t‎help‎very‎much‎in‎this‎way‎because‎first‎they‎employ‎

different design methods and second as mentioned before they are very much simple and just can

be used as skinning and in other case for example the MyMobile theme, it is just designed for

mobile devices and cannot be applied in all other type of the screen . They just can be helpful in

the case which the author can be familiar with the existing works to go steps further.


35 | P a g e

5. The pattern develop

After an extensive literature review and searching Literature across multiple disciplines for

existing approaches and guidelines in previews chapter, this chapter will focus on the design

process of pattern language for Moodle E learning platform, and it will present a detailed of the

designed pattern languages and their framework.

5.1. Identifying user

An interface is a means which will be used by people at the end then it is important to understand

the end users and how they use or like. The HCI design process just can start with the

understanding and characterizing the user who will use the interface then the designer needs to

gather this information:”

[Users] goals in using the software or site e.g. Learning something, Controlling or

monitoring something or conversing with other people

The specific tasks they undertake in pursuit of those goals

The‎language‎and‎words‎they‎use‎to‎describe‎what‎they’re‎doing

Their‎skill‎at‎using‎software‎similar‎to‎what‎you’re‎designing

Their‎attitudes‎toward‎the‎kind‎of‎thing‎you’re‎designing,‎and‎how‎different‎designs

Might affect those attitudes.” (Cooper, Reimann, & Cronin, 2007, p. 102)

In this task as the Moodle interface is an application for E Learning then all of the Attitudes,

Aptitudes, Motivations of the user is aimed to learning and educating and there are 2 roles for the

user: tutors and student users.

Then the process of the pattern design was started with the getting information from the Moodle

users which are student or teachers. Theses user can be who might already use the Moodle either

novice users then the random users from the student and teachers of Bochum university,


36 | P a g e

Wuppertal university, Bremen University, Köln university and Bonn university(Medical

department) made the user groups of the Moodle platform in this research.

5.2. Identifying Problems

After choosing the user group, the scenario-based (Goodwin, 2009, p. 57) approach for gathering

the information and problem was selected.

The scenarios base approach is the narrative description of the user while using a product to

achieve goals. This approach allows the designer to know the interface from a description of an

experience from the user perspective. This method focuses on people and how they think and

behave, rather than on technology or business goals. The designer from Scenarios based approach

can capture the verbal dialogue between the user and a product, environment, or system over

time, as well as the structure and behavior of interaction functions.

In this research different scenario task from accessing to content until uploading the content and

interaction with different user and customizing was defined for the users and request them to use

the platform while requesting them to think a loud.

The conclusion of the user critics gave the author a starting point and compiled the following list

of problems that designers, developers, and practitioners have to deal with (in no particular

order):

Print page

Mobile page, can go throw by browser without installing any application

Welcome page, give enough information in first glance

Student interface

Tutor interface

Admin interface


37 | P a g e

customizing

Navigation

Editing

Aesthetic feature

Browsing in content

5.3. The Pattern Language

The try for creating pattern languages was started with defining the special pattern for solving the

problem in general; it was the base for the pattern languages design and the next step is going in

detail for solving the problem and connecting the pattern to each other in order to make the

structural pattern languages.

The final result pattern are divided into five categories and for making the distinguish between

these categories, the color , digit number and a letter was assigned to every category. The color

and name of every pattern was assigned by the category which is belong, in a way that the top

level pattern of every category was identified by a letter and two digital number which it consist

of zero and a number and the first digit number of the sub category stated with the second digital

number of sub category. For example, the ID of the first top level of the Screen interface category

is S 01 and the sub level is S 11. (Figure 5-1)

Red: Screen interface patterns (ID S)

Blue: Mobile interface patterns (ID M)

Orange: Print interface patterns (ID P)

Green: Common patterns (ID C)

White: Moodle application patterns(ID A)


38 | P a g e

The pattern was categorized according to their scope of application. For example Screen interface

patterns deal with normal screen related issues and offer framework for solving the problem of

normal screen interfaces for Moodle while the Mobile interface patterns deal with Mobile screen

related problems.

As presented in Figure 5-1 every pattern in the pattern languages was linked by arrow to each

other. The incoming links from other patterns was mentioned in the context part while the

outgoing links was noticed in the reference part of the every pattern.it will help to the pattern

users to follow and use the each pattern very easy and fast in the application cases.


39 | P a g e

Figure ‎5-1: Moodle E Learning Platform Pattern Language Graph


40 | P a g e

5.3.1. JUMPING PAGE (S 01)

The starting point for the design Moodle interface is the front page. This page is critical page as it

is used by almost all of users. It has to fulfill the needs of all users (from novice to admin user)

as well as it should give them brief information about the event would happen inside the interface

and help them to login.

--------------------------

The Moodle users, in first glance, would like to have clear and brief information on the

front page while they wouldn’t like to be lost in the mass of the information

The web designer deals with the Front page as a jumping board where the user jumps into the

main pages and also it should direct the novice users step by step to the end of the board .the

website designer often placed a‎few‎important‎information‎on‎the‎front‎page‎because‎they‎don’t‎

want the users to lost in the mass of unrelated information but they also provide first step

information which the user needs before entering in the interface.

Figure ‎5-2: Moodle platform of Wuppertal University10

10 https://moodle.uni-wuppertal.de : retrieved 10 05, 2012

https://moodle.uni-wuppertal.de/


41 | P a g e

The E Learning platform of the Wuppertal University (figure 5-2) is good example which has

clear and neat FrontPage albeit it provides enough information for the user. The “first step

block”(Erste‎Schritte)‎,on the left column of the Front page ,will help the novice users to run in

the platform as well as it has blocks for the different category of the courses in middle and login

and search in the right side.

Therefore:

Invest a block for novice users as a first step helps and also place just necessary information

on the front page as well as develop enough navigation tools.

--------------------------

While creating the JUMPING PAGE, the LOGIN PANEL and FIRST STEP BLOCK will help

the user to enter the main pages and FLUIT LAYOUT and VISUAL STREAM will control the

appearance and visual factor of the JUMPING PAGE.

5.3.2. USER PAGE (S 02)

When the user log in on the platform , he/she will directed to the Main pages- where bring

together students, tutors. While, Students need basic information about their curriculum and

schedule, tutors need to monitor their courses as well as the admin needs to control all material

and gives enough access priority for all users. The especial users with its especial access priority

often do not know what their roll is and they can find out until they have spent some time.


42 | P a g e

--------------------------

The Moodle user must be logged in to the platform and based on the roles, they have special

tools which is not clear very much in first glance as well as the first look of the user

interface is same.

The user page is the frequently used method that are provided by the websites for the register

users. The Moodle‎doesn’t allow the user to enter as anonymous and also it offers different group

of the users which have different toolkits and can run different activity, for example the course

creator user can create courses while the student user doesn’t have this tools. The commercial

website with this ability usually helps the user to find out the extra tools which provided for them

as well as customize the appearance of the interface.

My Yahoo! Page (Figure 5-3), as an example, is one of the prominent website that has user page.

they provide the user page for users and the personal assistant, in the right column, gives special

tools just for specific user as well as the MY word on the left of the Yahoo! Logo shows that the

user is in the user pages.

Figure ‎5-3: The user page of Yahoo11

Therefore

Give the user a list of specific tools and activity when the users login to main page as well as

make clear the user roles.

11 www.my.yahoo.com : : retrieved 14 05, 2012

http://www.my.yahoo.com/


43 | P a g e

--------------------------

The CLEAR ENTRY POINT, BROWS and PERSONALIZE will help to Moodle designer to

specialize the interface for the log in user and make it easy for the set up and starting to use it.

5.3.3. PRINT PAGE (P 01)

While creating Moodle E-Learning interface, there are a special pages and content that users

would like to print it. The print page should be neat as the user can use it as same as print

material.

--------------------------

The printing pages of the Moodle site are very much frustrated due to a lot of graphics and

irrelevant data.

The website developer normally provide different version of the webpage content special for

printing aim. Users might be click on the print button on the page or browser and they will print

it. The interface data’s might be too long or with blocks of the irrelevant data then print page

should be cleared from all irrelevant content and navigation bars as well as it has been enough

titled as the user can use it without confusing.

The university of Bremen website (figure 5-4) will be good example for the print page. If the

users click on the printer button, they will find the page just with relevant content while the logo

of the university was kept and also they can find the titled content.


44 | P a g e

Figure ‎5-4: The screen and Print page of University Bremen12

Therefore:

Create a print page which is clear from frames, additional columns, navigation bars. Just

split across multiple pages and label the printable page with the emphasizing on title.

--------------------------

For developing the print friendly page, considering the PRINT STYLESHEET and VISUAL

STREAM of the platform as well as the PRINT FONT will be important.

12 http://www.uni-bremen.de : : retrieved 10 05, 2012

http://www.uni-bremen.de/


45 | P a g e

5.3.4. MOBILE PAGE (M 01)

The Moodle interface is used by the mobile users as well. It is really hard to estimate the screen

size and resolution of the mobile users but the designer have to think about the mobile users

which use the small screen size by limited action ability.

--------------------------

The Moodle themes don’t support the mobile screens while the most of the themes using the

normal screen for mobile too.

Figure ‎5-5: The screen and mobile interface of Design2learn E Learning Platform13

The website designer try to design different layout for mobile users as small screens are harder to

read than large ones, and normal framework of web sites can be much more difficult to use on

small screen mobile devices then the mobile interface is was taken away from the extra content,

images and the designer just keeps a few necessary task for users’ needs and order from the top

as the screen width of the users doesn’t‎frustrate‎it.

13 http://www.desire2learn.com/products/learning-environment/features/course-design-delivery : retrieved 02 05,

2012

http://www.desire2learn.com/products/learning-environment/features/course-design-delivery


46 | P a g e

The design2learn as a commercial E-Learning platform present the special interface which was

design for mobile screen (Figure 5-5 ).they removed the extra images and content in mobile

interface and mobile interface just presents the most needs task in the vertical order as the mobile

interface is narrow.

Therefore:

Make Moodle interface availed for mobile users. Put most important blocks on it. Arrange

the structure of the mobile interface based on narrow mobile screen.

--------------------------

The VERTICAL COLLUMN will directed designer for easy folding down the content and

FLUIT LAYOUT and FOOTTER NAVIGATION facilitated the mobile interface design while

the VISUAL STREAM will control the visual appearance to be as a whole with other pages.

5.3.5. LOGIN PANEL (S 11)

As Anonymous users cannot precede further than Front page and they have to log in before

entering the main pages, the Moodle Board for JUMPING PAGE is good option for login

--------------------------


47 | P a g e

When the unregister Moodle users click on the any activity, they directed to the login page

without any notification and they have to use Home or back button for returning to front

page.

In the websites that the users need to log in, they usually provide a panel or dialog box on the

same screen which request the login information. It prevent the user from moving to other page

as well‎as‎they‎have‎a‎“close”‎or‎“X”‎button‎which‎take‎back‎the‎user to the page that they came

from. This panel normally have limited navigation which allow to user to log in or register to the

system otherwise back to their previous place.

Figure ‎5-6: The log in panel of slideshare website14

For example in the slideshare website (Figure 5-6) when the user tries to do any activity which

need to be register , a light box will appears in front of the page where are only three way to

process:‎sign‎in,‎register‎or‎click‎on‎the‎famous‎“X”‎button‎to‎close‎it

Therefore:

Use login panel instead of the login page. It is a panel which appears on the FrontPage when

the user is not login and it can be simply close with pressing “Close” or “X” button.

14 http://www.slideshare.net : : retrieved 20 05, 2012

http://www.slideshare.net/


48 | P a g e

--------------------------

The CLIENT SIDE SCRIPTE will helpful to apply this pattern in the Moodle interface.

5.3.6. CLEAR ENTRY POINT(S 22)

When the Moodle novice users enter in the USER PAGE, they will prefer to have a help to find

the way in or give them clue about initial task or very small number of frequently used option.

--------------------------

When the Moodle main page is opened, the user faces with a few titled blocks, unfamiliar

navigation menu and there is not any clear information where they should start.

The websites as well as applications usually present‎“these‎entry‎points‎as‎“doors”‎into‎the‎main‎

content” (Tidwell, 2011, p. 88).The user would be leaded into the starting points until they have

enough information to continue.

The clear example for this pattern could be the UX Patterns Explorer website (Figure 5-7) which

shows a startup dialog when the website is started. This panel orients a new or infrequent user to

the possible category: Pattern library, Corkboard, examples, Design Library, Design boards and

Members are the most common items to be found here and also at the bottom, there is a checkbox

which the user can check it if he won’t like to have it in the next visit.


49 | P a g e

Figure ‎5-7: website of UX Patterns Explorer15

Therefore:

Present a Block on the Main page or a panel when the novice users enter in theirs page with

the basic tasks that the user would like to use.

--------------------------

The CLIENT SIDE SCRIPTE will helpful to apply this pattern in the Moodle interface.

15 http://quince.infragistics.com/ : : retrieved 02 05, 2012

http://quince.infragistics.com/


50 | P a g e

5.3.7. BROWS (S 23)

When the designer develops the USER PAGE, he offers a lot of items for users. E.g. .courses,

article, and exams and so on .The user would like to have brief information where he starts.

--------------------------

Moodle doesn’t provide enough browsing tools for the user who wants to engage in context

and navigated through the pages.

The website designer used the various form of the browsing tools in order to facilitate the

browsing for the users. The most important and top level of the browsing tools was placed on the

upper or left part of the website as it will be reachable fast for the users .Since the left and top of

the page was reserved for navigation tools that very much related and promoted for users which

shouldn’t‎be‎miss,‎the‎bottom‎of‎the‎page‎should‎be‎occupied‎with‎the‎second‎level‎ones.

Figure ‎5-8: Multiple browsing and navigation in design2 learn website16

The official website (figure 5-8) of the Design2Learn can be good example for different type of

the navigation, they used top, bottom navigation tools and especial related page navigation which

has lower priority on the right side.

16 www.design2learn.com : : retrieved 02 05, 2012

http://www.design2learn.com/


51 | P a g e

Therefore:

Provide suitable and multiple browsing tools for USER PAGE then users could access the

context of the platform as fast and as easy possible while navigating in.

--------------------------

Then building ESCAPE HATCH LOGO, TOP NAVIGATION BAR and FOOTER NAVIGATION

pattern will help to good browsing.

5.3.8. PERSONALIZE (S 24)

While designing the USER PAGE, the designer has to consider that people would like arrange

and customize their personal space base on their will. This customizing gives the sense of

ownership to users.

--------------------------

Moodle interface users interested in modifying the interface environment to suit their feels

and they like to arrange the all elements to reach it fast and easy.

The designers for the websites which have a lot of users that use the platform frequently and they

already know it well, have to extent the design as the user can decide on the appearance of


52 | P a g e

interface. The user should have ability to change the interface and its components according to

his will and make it personalize, it might be just changing the colors, fonts and background or the

user might have permit to change the look and feel of the control or maybe full customizing

ability.

Figure ‎5-9: Personalize the home page of design2learn E Learning platform17

17 http://www.desire2learn.com/products/learning-environment/features/course-design-delivery : : retrieved 02 07,

2012

http://www.desire2learn.com/products/learning-environment/features/course-design-delivery


53 | P a g e

Figure 5-11 shows the pages of the Design2Learn platform where the user can customize the

homepage of the interface. The user can decide on the content and blocks which would like to be

in his homepage

Therefore:

Make available the structure of the Moodle so that users can set and apply their own style

and design as easy as possible.

--------------------------

The SETTING PANNEL and MOVABLE PANEL are the patterns will help the designers to

make the website customable as well as VISUAL STREAM will control the visually factor of

the interface.

5.3.9. MOVABLE PANEL (S 25)

The Moodle pages are structured on the different blocks. The user might have priority to remove

or add these blocks from the USER PAGE but it is not possible to order it as they do on their

desk.


54 | P a g e

--------------------------

The Moodle users after login to USER PAGE would like to rearrange the working

environment as they feel a sense of ownership and suit to his will.

The web site designer which have module in the design style, they give each module a name, a

title bar and arrange theme in the page by default but also they allow the user to move the

modules in the pages according to their wills place. They often defined a predefined grid for the

layout and allow the user to freely move the modules and place them anywhere in the existing

slots without losing the page main layout alignment.

And also allows the users to remove the modules just simply by pressing‎the‎familiar‎“X”‎button

on the title bar.

The Moodle Aardvark Post-It theme is good example which uses the MOVABLE PANEL by the

drag and drop activity for moving the blocks to the top of the profile page. The user simply can

grab the tile bar of the modules and move it around the page and put in one of the predefine slot

of the page layout grid.

http://moodle.org/plugins/view.php?plugin=theme_aardvark_postit


55 | P a g e

Figure ‎5-10: The moveable panel of Aardvark Post-It theme 18

Therefore:

Put modules of content into boxes that can be opened and closed independently of each

other. Arrange the boxes freely on the page, and let the user move them around into a

custom configuration.

--------------------------

The CLIENT SIDE SCRIPT will help the designer to implement this pattern on Moodle.

5.3.10. SETTING PANEL (S 26)

While HCI Moodle designer make it available for PERSONALIZE then there should be setting

options that the user could involve them in order to personalize.

--------------------------

Moodle interface does not support the comprehensive category of editing setting

18 http://moodlestudio.visible-expression.co.uk/?theme=aardvark_postit : retrieved 11 05, 2012

http://moodle.org/plugins/view.php?plugin=theme_aardvark_postit

http://moodlestudio.visible-expression.co.uk/?theme=aardvark_postit


56 | P a g e

Most websites place the setting editor where the username of the login user was showed and it

will aid to be findable, this place is always on the upper right corner and after pressing the setting

navigation they direct to the other page where there is predefine option. The setting pages

normally are categorized based on the various option with well labeled and sensible name and

fit in one page as user can find the specific setting very easy .

Figure ‎5-11: The setting panel of iGoogle19

Another aspect that usually consider in the setting page is possibility to see the changes before

making it fix by pressing the save button .The designer placed the preview button for this mean.

The setting page of the iGoogle (figure 5-11) is very good example for setting panel in the way

that the user will find edit setting on the top of the page and he will directed to setting panel when

click on the it.

Therefore:

19 www.google.com : retrieved 11 05, 2012

http://www.google.com/


57 | P a g e

Develop an easy findable page where the users can change platform setting and divide the

setting in different category with well label title.

--------------------------

The ADMINSTRATOR SETTING and USER SETTING will help to implement this pattern in

the Moodle.

5.3.11. TOP NAVIGATION BAR (S 27)

After designing Moodle platform with multilevel of BROWS tools, the designer should spread

the navigation according to its priority in different part of the page and the top of the page is one

of the important places where should be consider.

--------------------------

The Moodle platform doesn’t use the header of the page as a place for navigation.

The Large scale web sites which have a lot of categories and sub category, they emerge all as a

navigation bar on the top of the page where is easy accessible for the users. Top navigation bars

normally play the role of top level navigation.


58 | P a g e

Navigation bars links to the most important position of a web site either through text links or

through icons and text. Icon by themselves are usually not effective because they are not always

universally understood across cultures or even within a culture. It helps to have a text description

to augment an icon.

Figure ‎5-12 : Top navigation of Aardvark theme 20

The Aadvark theme (Figure 5-12) of the Moodle can be mentioned as example which used top

menu navigation too.

Therefore:

Organize the top and second level navigation in a navigation bar into the top side of the

page. Use just text or both of text and icons as links for navigation.

--------------------------

20 http://vle.newbury-college.ac.uk : retrieved 11 05, 2012

http://vle.newbury-college.ac.uk/


59 | P a g e

The FAT MENU will help the designer to order the second level navigation in and avoid the

mass.

5.3.12. LOGO SCAPE HATCH (S 28)

You have installed the complete Moodle platform with lot of content which the user will have a

lot of the activity to do, if the user would like directly back to the home page it will confusing just

to use the back buttons.

--------------------------

Moodle gave the user the long serial process for doing the task as well as locked the user in

a situation where they would like to back to Home page

The designer usually provide a‎ button‎ or‎ link‎ on‎ the‎ page‎ that‎ brings‎ the‎ user‎ back‎ to‎ a‎ “safe‎

place.”‎This‎might‎be‎a‎home‎page,‎a‎hub‎page‎in‎a‎hub-and-spoke design, or any page with full

navigation and something self-explanatory on it. Exactly what it links to will depend upon the

application’s‎design.

Figure ‎5-13 : The Logo of the amazon 21

21 www.amazon.de : retrieved 11 05, 2012

http://www.amazon.de/


60 | P a g e

Amazon websites uses clickable site logos as home-page links, in the upper left of a page. These

provide an LOGO SCAPE HATCH in a familiar place, while helping with branding.

Therefore:

Use clickable site logos as home-page links, usually in the upper left of a page. These

provide an Escape Hatch in a Home page, while helping with branding.

--------------------------

The LOGO BOX will help the designer to implement the LOGO SCAPE HATCH pattern.

5.3.13. FAT MENU(S 29)

While the designer will established a TOP NAVIGATION BAR, they will face with the lot of

navigation blocks which will make the mass of navigation which occupy large spaces.

--------------------------

Moodle has many pages in many categories which give the user the ability to explore the

side but they occupy a lot of limited and precise spaces of the main content.


61 | P a g e

Figure ‎5-14 : The Fat menu of Microsoft website 22

The complex website designer use big drop-down or fly out menus for comfortable browsing

inside the websites. They can show a long list of navigation option in these menus and all second

level navigation. This kind of the menu give a complex option for the user to discover the page

although this complexity is hidden until the user asks to see it.

The Fat Menus on the Microsoft website are very well designed (Figure 4-15). Each menu is a

different height but the same width, and follows a strict common page grid. The style blends in

with the site, and the generous whitespace makes it easy to read.

Therefore:

Use FAT MENU as the user won’t have to drill down into categories and subcategories of

the site in order to discover interesting pages—they’ll see them there, right up front.

22 www.microsoft.com : retrieved 11 05, 2012

http://www.microsoft.com/


62 | P a g e

--------------------------

The COSTUM MENU and RENDERER will help the designer to implement this pattern.

5.3.14. FOOTER NAVIGATION(C 02)

While designing the global navigation of the Moodle platform for easy BROWS, the designer

cannot place low level navigation items on the header –especially in MOBILE PAGE- as well as

in the main body content as this parts are precious parts which have to be reserved for important

material.

--------------------------

The header or side bar navigation will occupy very many spaces which can be filled by

other important context and it is not necessary to put all level of the navigation on the

header or side bar navigation.

The website designer for solving this problem, design a footer bar navigation which is placed on

the footer and it contains‎the‎lower‎level‎navigation‎which‎the‎user‎doesn’t‎need‎to‎use‎it‎while‎he

enters in the page, it might include the tools like languages selector and other typical footer

information such as the site provider logos or Moodle logo or copyright statement as well as the


63 | P a g e

complete site map of the site can be placed in footer. All the content which the user would like to

find without any overloading the TOP NAVIGATION BAR.

The footer navigation is very practical for mobile users which have limited spaces for content and

navigation then the designer creates the vertically footer menu on the bottom of the page where

make them easy to tap with a finger on touch screens—stretch them across the full width of the

mobile page, and make the text large and readable.

Figure ‎5-15: The header and footer navigation of the Blackboard site23

Blackboard’s‎website(figure 5-15) demonstrates the difference task between top bar navigation

and footer navigation. Platforms, Markets, services and contacts navigation was placed on the

header, as these are what most site visitors look for. The footer handles secondary tasks that are

nevertheless important: stay in touch and Market as well as the repeating of a few header

23 http://www.blackboard.com : retrieved 11 05, 2012

http://www.blackboard.com/


64 | P a g e

navigation options which user may will need after reading the whole page but can access without

rolling to top.

Therefore:

Place a footer navigation bar into the footer of every page in a site. Treat it as part of the

global navigation, complementary to the header.

--------------------------

This‎is‎a‎basic‎pattern‎which‎doesn’t‎have‎any‎further‎references‎in‎this‎language

5.3.15. FLUID LAYOIT (C 01)

The content of the Moodle interface is learning content which will be used by different users with

variety of the devices and it is impossible for designer to predict the condition which user will

view the interface, e.g. screen size, font preferences and etc...

--------------------------

The content of the Moodle contains a lot of text and the user might want to have different

size of the spaces for viewing the content.


65 | P a g e

The web pages with FLUID LAYOUT ability force the content to fill the new space as its size

was changed, while keeping the structure of the page by the some fix item in their place, for

example: keep main navigation or header by sticking to top or left margin.

The‎designer‎should‎draw‎a‎strategy‎for‎how‎the‎content’s‎layout‎will‎change‎as‎its‎container’s‎

size‎changes”Multiline‎text‎should‎wrap‎at‎the‎right‎margin‎until‎it‎becomes‎10‎to‎12‎words‎wide‎

(more on that later). Text, trees, tables, graphs,‎ and‎ editors‎ at‎ “center‎ stage”‎ should‎ enlarge‎

generously while their margins stay compact. If the page has anything form-like on it, horizontal

stretching should cause text fields to elongate—users will appreciate this if they need to type in

anything‎longer‎than‎the‎text‎field’s‎normal‎length.‎Likewise,‎anything‎scrolled‎(such‎as‎lists‎or‎

tables)‎should‎lengthen,‎and‎possibly‎widen,‎too.” (Tidwell, 2011, p. 187).Background colors and

patterns should always fill the new space, even if the content itself cannot...

Figure ‎5-16: The fluid layout of the iGoogle 24

24 www.google.com : retrieved 11 05, 2012

http://www.google.com/


66 | P a g e

Figure 5-16 present the iGoogle page which the content layout changes while the page is resized.

Each module keeps their own position related to others but each modules size change and

rearrange its content in a way that fill it in a different way.

Therefore:

Design the layout in the way that it will be flexible while the user use the interfaces in

different screen sized while the page is always filled.

--------------------------


5.3.16. PRINT FONT (P 11)

While the Moodle have neat PRINT PAGE without extra content, image and navigation, the user

may need to structure and suitable font.

--------------------------

The text is an important element in the PRINT PAGE and it should be used and organized

as it is very clear and suitable for reader.


67 | P a g e

The typographic uses different type and weight of the fonts for making a strong and vibrant

visual contrast in the print material rather than online ones. “Aesthetically,‎contrast‎contributes‎to‎

a dramatic and eye-catching look. High typographic contrast, which includes size, texture, and

color”‎ (Tidwell, 2011, p. 516) and the print page designer can use this contrast to structure the

PRINT PAGE. “Thus,‎contrasting‎font‎weights‎contribute‎to‎the‎cognitive‎perception‎of‎the‎page‎

as much‎as‎the‎aesthetics.” (Tidwell, 2011, p. 516). And‎also‎the‎“serif”‎family‎fonts like as Time

New‎Roman‎are‎best‎font‎for‎print‎rather‎than‎“san‎serif”‎fonts are better for screen.

Figure ‎5-17: The print page of University of Bremen25

For example, the bold, big size and grace fonts was used in the print page of the university of

Bremen (Figure 5-17) as titles and headlines and the normal as well as smaller font was used as

content body then the size, weight and color of the fonts make the visual structure of the page.

Therefore:

Use different font’s weight, size and color to separate different levels of information and

add visual interest and also “serif” family fonts for PRINT PAGE.

25 www.uni-bremen.de : retrieved 11 05, 2012

http://www.uni-bremen.de/


68 | P a g e

--------------------------

The PRINT STYLESHEET will help the designer to implement this pattern on Moodle.

5.3.17. VISUAL STREAM (C 03)

The designer designs the JUMPING PAGE, MOBILE PAGE, USER PAGE and PRINT PAGE

for Moodle although all of these pages accompany with the learning and educating activity of the

Moodle but they have to give same sense of visually.

--------------------------

The Moodle website is interface with different pages as well as print and mobile pages

which make it a complex interface. The designer should be considering that all this pages is

hanged to each other and should have look like as a whole.

Figure ‎5-18: The JetBlue website visual stream 26

26 www.jetblue.com : retrieved 11 05, 2012

http://www.jetblue.com/


69 | P a g e

The professional designer when designs the webpage with various screen, they try to give an

overall look and feel to the pages as the user catches same visual character among all pages and

its visual character can be the logo, color of the background or other color or fonts of header,

titles and so on.

JetBlue is a commercial web page which designed with the restricted color and visual elements in

all of the pages even in mobile interfaces.

Therefore:

Design each page with the same basic layout, colors, and stylistic elements, while the pages

give the look and feel of one whole to user.

--------------------------

The LOGO STREAM is a pattern will help the designer to keep the VISUAL STREAM of the

interface.


70 | P a g e

5.3.18. VERTICAL COLLUMN (M 11)

When the designer develop the MOBILE PAGE, they should take it into account that mobile

screens have different size of the screen and moving from one page to others will take very much

time as well as cost.

--------------------------

The Moodle mobile users use different size of the screen and it is almost impossible for the

designer to estimate the screen width of the user and as well as in the stationary and laptop

screens user can use the zoom and left-right scrolling but it wouldn’t be as simple for

mobile user.

The mobile interfaces designer for solving this problem, they layout‎ the‎ page’s‎ content‎ in‎ a

vertical scrolling column. In their design they try to place the most important and using items on

the top of the page and the other items was arrange on the bottom by importance

Figure ‎5-19: The mobile interface of the amazon27

27 www.amazon.de : : retrieved 11 07, 2012

http://www.amazon.de/


71 | P a g e

Amazon website (Figure 5-19) MOBILE PAGE is demonstrated based on the vertical column

style, simply put the special offer items on the top of its home page and then shows a menu of all

the available category and ways to shop.

Therefore:

Design the mobile interface’s content in a vertical column with the any left-right scrolling

function and arrange the content as scroll down past the content to bottom.

--------------------------


5.3.19. LOGO STREAM (C 04)

The Moodle interface was design for all kind of screen size: MOBILE PAGE as well as PRINT

PAGE and it are important that the user should have identified all as a whole.

--------------------------


72 | P a g e

The Moodle have different user pages as well as Mobile interface which the screen doesn’t

have much space for non-content elements and the print pages which follow different size

and critic from online screens.

The E learning platform was designed for variety of the users with different devices then the logo

issue is one of the factors that they have to consider while designing interfaces. The professional

designer normally creates the logo in different sizes and modification while keeping the visual

characteristic of the Logo. They create the small version of the logo, not bigger than 50 pixels for

mobile interfaces and create the 4-5 cm logo for the printing on the A4 size pages as well as if

they have sign in users, they design different version of logo too.

Ebay (Figure 5-20) is website while keep its branding look of the logo as it is recognizable for all

users in the Mobile screen and normal ones.

Figure ‎5-20: The normal and Mobile screen of the eBay28

Therefore:

28 www.ebay.de : retrieved 20 06, 2012

http://www.ebay.de/


73 | P a g e

Create the different kind logo in the same color and shape but give it special and small size

as it can be print on A4 size page as well as can be load fast on the mobile.

--------------------------

This‎is‎a‎basic‎pattern‎which‎doesn’t‎have‎any‎further‎references‎in‎this‎language.

5.3.20. Application pattern language

5.3.20.1. FIRST STEP BLOCK (A 01)

The Moodle was installed and working but the administrator want to structure the JUMPING

PAGE and he needs a block just for unregistered user which would like to know first step

information for registration.

--------------------------

Moodle inbuilt blocks cannot be restricted that they just appear for the unregistered users

then the inbuilt HTML block cannot be used as first step block.


74 | P a g e

The Moodle theme developer normally structured the theme specific blocks simply inside the

layout pages and this provides them possibility that they can modify the content by the

administrator theme setting page.

Therefore:

Structured a HTML block inside the FrontPage layout as it is restricted by “isloggedin”

function of core Moodle and the administrator can activate it and set the content for it.

--------------------------

This is a basic pattern which‎doesn’t‎have‎any‎further‎references‎in‎this‎language.

5.3.20.2. Logo box (A 02)

The Moodle needs to apply the LOGO SCAPE HATCH in order to help the BROWS by the users

during the interaction.

--------------------------

The Moodle users may not have any logo and they use the tagline or header text instead of

the logo.

The commercial websites often use the logo for presenting the brand but Moodle users are most

teachers‎which‎ doesn’t‎ need the branding and the logos and it will be impossible to define a

LOGO SCAPE HATCH but if the Moodle designer preserve a box for the logo or header text

then the LOGO SCAPE HATCH will apply on this logo box.

Therefore:

Use the predefine logo box for the Moodle interface which user can upload the logo or add

text and have LOGO SCAPE HATCH functionality.

--------------------------


75 | P a g e


5.3.20.3. CUSTOM MENU (A 03)

The Moodle interface needs to configure the FAT MENU for better browsing inside it.

--------------------------

Normal installation of the Moodle doesn’t show the FAT MENU automatically.

The Moodle have defined the fat header navigation as a custom menu which should be active by

the administrator manually and define manually too. The administer user can just go to the theme

setting and active the custom menu by define the content for it

Therefore:

Active the custom menu from the theme setting page.

--------------------------

The RENDERER will help to the designer to link internal items to the custom menu

5.3.20.4. RENDERER (A 04)

The CUSTOM MENU was enabling in the Moodle and the designer would like to link the

Moodle’s contents to it.

--------------------------

The CUSTOM MENU item just use the external URLS and it is not possible to link them to

internal contents.

The Moodle gives the opportunity for the designer to override on the core renderer of the Moodle

and it is possible by renderer class then the Moodle theme designer used the renderer for linking

the internal content to the CUSTOM MENU for example login/logout or courses.


76 | P a g e

Therefore:

Use the override renderer for connecting the internal content and active items to the

CUSTOM MENU and the renderer’s external file is best option.

--------------------------

This‎is‎a‎basic‎pattern‎which‎doesn’t‎have‎any‎further‎references in this language.

5.3.20.5. ADMINISTRATOR SETTING (A 05)

The Moodle site was planned to have SETTING PANEL but it not sensible to have all settings

for every user and Moodle has possibility to have wide options of the setting only for

administrator.

--------------------------

The theme setting page for administrator is very simple and doesn’t have many options in.

In normal theme of the Moodle there is a setting. php file which includes all of the settings,

theses settings are planned for the theme and Moodle have flexibility to place a lot of option in it

and all of options can be customized by admin users.

Therefore:

Locate options as much as possible in setting.php in theme as the administrator can modify

the theme and categorize settings according the application path.

--------------------------



77 | P a g e

5.3.20.6. USER SETTING (A 06)

The Moodle site was planned to have SETTING PANEL but it not sensible to have all settings

for administrator users as well as there should be enough setting options for other users in order

to modify the interface and make it personalize for all users.

--------------------------

The Moodle normal structure doesn’t present the settings for the normal user to

personalize the interface.

The commercial websites specified some settings for the registered users as they can personalized

a few item on the interfaces. It can be modifying the color or font or maybe their personal pages.

Therefore:

Set the user settings and provide theme for all users to personalize own pages.

--------------------------

The CLIENT SIDE SCRIPT will help the designer to implement this pattern on Moodle.

5.3.20.7. CLIENT SIDE SCRIPT Library (A 07)

The Moodle interfaces needs to have MOVABLE PANEL, CLEAR, ENTRY POINT, USER

SETTING for improving its HCI and its functionality which are the client side actions.

--------------------------

The PHP layout of the Moodle could not support the client side action by alone.

The common and simple way for defining the client side interactions in the websites is using the

JavaScript codes and also there is a few JavaScript libraries which will make the development


78 | P a g e

fast and easy for example: the YUI, Jquerry and etc. And each of them has own feature but the

most popular and famous is Jquerry ones but the Moodle use the YUI in its core

Therefore:.

Use the JavaScript library as the Client side script library either Jquerry or YUI.

--------------------------

This‎is‎a‎basic‎pattern‎which‎doesn’t‎have‎any‎further‎references‎in‎this language.

5.3.20.8. PRINT STYLESHEET (A 08)

The Moodle should have PRINT PAGE for the users who would like to print the content of the

interface neatly.

--------------------------

Moodle print layout was not working.

In the normal website, the web designers use the style sheet for formatting the print pages and

making it recognizable for the print media. They use two methods; one is embedded inside the

layout file and others inside the style sheet itself. In the Moodle as the entire style files were

configure by the external config file then the embedded method is useless.

Therefore:

Define the print style sheet for the Moodle with the print media definition inside it

--------------------------

This‎is‎a‎basic‎pattern‎which‎doesn’t‎have‎any‎further‎references‎in‎this language

A Pattern language for the Moodle E-Learning Platform The Application of pattern language

79 | P a g e

6. The Application of pattern language

This chapter presents the application of the pattern languages on the Moodle in order to evaluate

the pattern languages.

6.1. Application path

The application was started of choosing the correct application path. The theme plugin of the

Moodle.2.0 was chosen as the best application path since the theme is a plugin which has direct

control on the Moodle user interface and also the designer can work on it without interfering the

core Moodle as well as its renderer class will help the developer to override the core renderer of

the Moodle. The theme also can easily apply in the Moodle installation without doing many

changes on the core of the Moodle and also it can simply switch to normal Moodle

6.2. Application of Screen and Print patterns

The basic 3 column Moodle theme was chosen as a base for interface development and the

interface was structured as shown in figure 6-1.(Complete application can be find in CD

attachment in the folder of Theme/PardisMasterThesis )

Figure ‎6-1: Main structure of screen interface


80 | P a g e

6.2.1. LOGIN PANEL application

The LOGIN PANEL was implemented by creating a form in the separated file which post all of

the data to the main login page of the Moodle while it use the $CFG global variable of the core

Moodle for finding the Moodle index directory from the URL. (CD/themes/

PardisMasterThesis/layout/login.php and CD/themes/

PardisMasterThesis/layout/dialoglogout.php )

Figure ‎6-2: LOGIN PANEL application

6.2.2. FIRST STEP BLOCK application

This pattern was designed as an embedded block inside the front page which just appear for the

unregister users (it used the isloggedin function for checking the register users) on the left column

of the front page and it was also structured based on Moodle block class and it follows the same

styles.( CD/themes/ PardisMasterThesis/layout/firststep.php )

<?php

function get_content () {

global $CFG;

$wwwroot = $CFG->wwwroot;}

echo '<form id="login" method="post" action="'.$wwwroot.'/login/index.php">';


81 | P a g e

Figure ‎6-3: FIRST STEP BLOCK application which was disappeared after login

6.2.3. JUMING PAGE application:

For making the JUMPING PAGE , We need LOGIN PANEL and FIRST STEP BLOCK and

connect them to the front page layout and it just be done simple by including the former patterns

implementation inside the front page in the correct place. The FIRST STEP BLOCK was placed

inside‎the‎‘region-post’‎of‎the‎page‎structure‎but‎the‎LOGIN‎PANEL‎can‎be‎done‎in‎any‎place‎as‎

it was controlled by the Javascript to be appear in the dialog box.( line 128th

and 198th

in

CD/themes/ PardisMasterThesis/layout/frontpage.php )

if (!isloggedin()){

echo '<div class="block" >';

echo '<div class="header" >';

..

echo '<div class="content">';

echo $PAGE->theme->settings->firststepcontent;


82 | P a g e

Figure ‎6-4:JUMPING PAGE application

6.2.4. LOGOBOX application

Logobox is just a div container which embedded in the body of any layout page and it includes

the logo or tagline of the page in.

<div id="region-post" class="block-region">

<div class="region-content">

<?php if ($hasfirststepcontent){ include ('firststep.php');}?>

<div id="logobox">

<?php if ($haslogo) {

echo html_writer::link(new moodle_url('/'), "<img src='".$PAGE->theme->settings->logo."' alt='logo'

/>");

} else {

echo html_writer::link(new moodle_url('/'), $tagline, array('class'=>'nologoimage'));

} ?></div>


83 | P a g e

It cen be find in 141st line in CD/themes/ PardisMasterThesis/layout/frontpage.php and 130

th

line in CD/themes/ PardisMasterThesis/layout/general.php

6.2.5. LOGO HATCH SCAPE

It can simply apply by the hover function which applied on the logobox div container in the

core.css.( 277th

line of CD/themes/ PardisMasterThesis/stylet/core.css)

Figure ‎6-5:LOGO HATCH SCAPE application

6.2.6. FOOTER NAVIGATION

Footer navigation was defined in the footer layout file (CD/themes/

PardisMasterThesis/layout/footer.php) which get the name and the proposed URL from the

administrator and make the footer navigation for Moodle as unordered list.

Figure ‎6-6:FOOTER NAVIGATION application

#logobox a:hover {

background: url([[pix:theme|home]]) no-repeat;

background-position:right bottom; }


84 | P a g e

6.2.7. RENDERER

Renderer is a function which override on the core renderer of the Moodle, in this application we

used the renderer for adding the new item to custom menu as the course which use the active

course for making the menu items .(this renderer was developed and extend base on the my

course renderer of the Moodle (Moodel developer, 2011)).( CD/themes/

PardisMasterThesis/renderers.php)

<div class="footermenu" >

<ul>

<li> Footer menu first list</li>

<?php if ($hasfootermenuitem1) {?><a href="<?php echo $PAGE->theme->settings-

>footermenuitem1;?> "><li><?php echo $PAGE->theme->settings->footermenutitle1;?></li></a>

<?php } else {}?>

<?php if ($hasfootermenuitem2) {?><a href="<?php echo $PAGE->theme->settings-

>footermenuitem2;?> "><li><?php echo $PAGE->theme->settings->footermenutitle2;?></li></a>

<?php } else {}?>

class theme_PardisMasterThesis_core_renderer extends core_renderer {

protected function render_custom_menu(custom_menu $menu) {

$courses = $this->page->navigation->get('courses');

if ( $courses && $courses->has_children()) {

$branchlabel = get_string('courses');

$branchurl = new moodle_url('/course/index.php');

$branchtitle = $branchlabel;

$branchsort = 10000;


85 | P a g e

6.2.8. CUSTOM MENU and FAT MENU application

The custom menu is a FAT MENU which is inbuilt in the Moodle and it should be activated by

the administrator from the theme setting page.

6.2.9. TOP NAVIGATION BAR application

The TOP NAVIGATION BAR application automatically was done when the FAT MENU ,

CUSTOM MENU and RENDERER pattern was applied.

Figure ‎6-7: TOP NAVIGATION pattern application

6.2.10. BROWS application

The LOGO HATCH SCAPE, FOOTER NAVIGATION and TOP NAVIGATION BAR are three

patterns which implement the BROWS pattern.

$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);

foreach ($courses->children as $coursenode) {

$branch->add($coursenode->get_content(), $coursenode->action, $coursenode-

>get_title());

}}

86 | P a g e

Figure ‎6-8: BROWS pattern application

6.2.11. ADMINSTRATOR SETTING

The setting.php which has control on the administrator settings and the designer can define any

option in it and they can be active in the layout when activated by the administrator. (CD/themes/

PardisMasterThesis/setting.php) and can be categorized inside the admin. php ( 174th

line in

CD/themes/ PardisMasterThesis/admin.php)

For example the administrator user can active the LOGIN PANEL OR CLEAR ENTRY POINT

from this setting panel.

$qualifiedurl = qualified_me();

echo '

<form action="settings.php" method="post" id="adminsettings"><div class="settingsform

clearfix"><input type="hidden" name="section" value="themesettingPardisMasterThesis" />

<input type="hidden" name="sesskey" value="GDvQse6iYI" /><input type="hidden"

name="return" value="" /><h2 class="main">PardisMasterThesis</h2><fieldset>

<div class="clearer"></div>

<div id="tabs">

<ul>


87 | P a g e

Figure ‎6-9:ADMINSTRATOR SETTING pattern application

6.2.12. USER SETTING

The user setting was defined as setting panel on the top-left of the interface. Its color switcher

panels was controlled by the colourswitcher.js (CD/themes/ PardisMasterThesis/javascript/

colourswitcher.js)

Figure ‎6-10:USER SETTING pattern application

6.2.13. PERSONALIZE

The administrator and user setting provide the PERSONALIZE opportunity for the interface.

6.2.14. CLEAR ENTRY POINT

The CLEAR ENTRY POINT was defined by the dialog box which appeared when the user

register in the front page and it was structured by the user information and links for the places

who may would like to visit before doing anything on Moodle. CD/themes/

PardisMasterThesis/layout/ dialoglogin.php)

if($showdialoglogin){

echo html_writer::start_tag('div', array('id'=>'dialoglogin'));


88 | P a g e

Figure ‎6-11:CLEAR ENTRY POINT pattern application

6.2.15. PRINT STYLESHEET

The special CSS files which detect the print media by inbuilt address which was provided for

print page aim. (CD/themes/ PardisMasterThesis/stylet/print.css)

6.2.16. PRINT FONT

The Print font was also defined inside the print stylesheet. ( 39th

line in CD/themes/

PardisMasterThesis/stylet/print.css)

echo html_writer::tag('h1', get_string('usergreeting', 'theme_PardisMasterThesis', $USER-

>firstname));

echo html_writer::start_tag('div', array('id'=>'userdetails_profile'));

echo html_writer::link(new moodle_url('/user/profile.php'), get_string('editprofile',

'theme_PardisMasterThesis'));

@media print{

html { padding: 0; margin: 0;background: #fff;}

body { background-color: #fff; margin: 0 auto; padding: 0;width: 100%;}

#headermenu{ display:none;}


89 | P a g e

6.2.17. PRINT PAGE

The PRINT PAGE was provided by the PRINT STYLESHEET.

Figure ‎6-12: PRINT PAGE pattern application

6.3. Application of Mobile patterns

The basic 2 columns Moodle theme was chosen as a base for interface development and the

interface was structured as shown in figure 6-13 .(Complete application can be find in CD

attachment in the folder of Theme/PardisMasterThesisMobile)

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { /* Set fonttype for site */

font-family: "Times New Roman",Georgia,Serif; }


90 | P a g e

Figure ‎6-13: Main structure of Mobile interface

6.3.1. VERTICAL COLUMN application:

The body class of the Moodle makes it impossible to create one column theme from the base as

it needs a separate column for the block then the base started by 2 columns theme by

configuration in the config file:( 89th

line in CD/Theme/PardisMasterThesisMobile/config.php)

Then‎we‎can‎fix‎the‎layout‎to‎show‎all‎content‎just‎in‎one‎area‎just‎by‎changing‎the‎‘side-pre’‎to‎

the‎ ‘content- only’‎ in‎ the‎ header‎ part of the any layout.php files (44th

line in

CD/Theme/PardisMasterThesisMobile/layout/general.php)

'General' => array(

'file' => 'frontpage.php', 'regions' => array('side-pre'), 'defaultregion' => 'side-pre'

if ($hassidepre && !$hassidepost) { $bodyclasses[] = 'content-only';

} else if ($hassidepost && !$hassidepre) {$bodyclasses[] = 'content-only';

} else if (!$hassidepost && !$hassidepre) { $bodyclasses[] = 'content-only';}


91 | P a g e

6.3.2. FOOTER NAVIGATION application

Now we have a one column theme which show the blocks on the top of the main content. The

solution for this problem is on the‎ div‎ container‎ with‎ “region-pre-box”‎ id‎ which‎ should‎ be‎

removed from the layout files of Mobile theme then all of navigation blocks move to the footer

of the page and if the user would like can define extra footer menu for theme as Screen theme(see

FOOTER NAVIGATION application on screen and print patterns)

6.3.3. VISUAL STREAM application

The VISUAL STREAM of the mobile theme was controlled by the CSS files and it should have

use all color and configuration same as screen and print just by minimizing the logobox class size

to max 60px as the mobile header space is important for user as mentioned in the Mobile

interface patterns.( CD/Theme/PardisMasterThesisMobile/style/core.css)

Figure ‎6-14:screen shot of the Mobile theme for this thesis

6.3.4. MOBILE PAGE application:

Application of this pattern is really simple after designing the Mobile theme for Moodle and it

can be done simply on the themeselctor windows by selecting the Mobile theme.


92 | P a g e

Figure ‎6-15:MOBILE PAGE pattern application

A Pattern language for the Moodle E-Learning Platform Conclusion and future works

93 | P a g e

7. Conclusion and future works

7.1. Conclusion

This thesis presents a pattern language for Moodle user interface. The research first started by the

gathering the concept of the pattern languages from the architecture to HCI design area. These

studies resulted in the final format for pattern language development.

The second step was done by studies the interface and architecture of the Moodle ELearning

platform in order to be familiar by general feature of the platform then the research was directed

to review the previews works which was done on the HCI design pattern as well as Moodle

themes designs. The process of the pattern design started by usability studies by Moodle users in

order to find the gaps and problem. The users studies give the list of the problems . The process

of the pattern development started by identifying the conflicting forces and conducting the set of

the pattern which was named as can support the proposed solution and find the connection

between the patterns and structure the pattern language.

In the next step the designed pattern was evaluated by the application in the Moodle theme

design.

7.2. Future works

The possible future research can be done in future:

Peer review evaluation and feedback:

The established procedure for the pattern language evaluation is a peer review of the patterns by

expert peoples (Borchers, 2001), (Remy, 2010) and it was done normally in the conferences and

workshops where experts are gathering . The author would like to use this process for evaluating

this pattern languages then the future work will be presenting this pattern language in the

conferences either in a paper or poster formats in order to get evaluating feedbacks and

improvement tips from the experts.

A Pattern language for the Moodle E-Learning Platform Conclusion and future works

94 | P a g e

Present to Moodle community:

The second main step will be encouraging the Moodle developers and experts to contribute in the

pattern languages development process. This contribution not only will improve the existing

patterns but also will help on the new future patterns. The development of one interactive page

for the current languages will be good presentation for the Moodle community to participate in

and another step will be uploading the prototype in the Moodle theme plugin part and opening the

forum topic in the Moodle developer forum and announce the work in it will be main steps in this

way.

Complete domain pattern language:

As mentioned before, there is also other pattern development effort in the pedagogy area which

can be add to the HCI domain pattern as the ELearning has complete components.

Complete the application of INCREMENTAL STRUCTURE PATTERN

The process will explain on the Appendix A.

A Pattern language for the Moodle E-Learning Platform Appendix A

95 | P a g e

8. Appendix A

8.1. INCREMENTAL STRUCTURE(S 21)

When the designer develops the USER PAGE, he should consider the needs of the course creator

users and developed the appropriate tools for theme and facilitated the course creating activity.

--------------------------

The Moodle have rigid format for structuring the courses and the course creator just can

create one sub level for every lessons and it is not possible to have more level on the course

structure.

An application which gives writing and creating content permission to users, usually has a

flexible structure as the user can structure own content according to his wills, in this applications,

the user can structured his content level by level as well as he can back to the top level and

modify it or add or change the levels.

The Microsoft Word application are the common and most used application where the user can

developed his content and structure the list of the content according to his will .

Figure ‎8-1: screen shot of Microsoft word 2010


96 | P a g e

Therefore:

Program flexible structure for the course format as the course creator can structure the

course how he would like as well as he can defines sub levels.

--------------------------

This pattern should have an application pattern for the Moodle.


97 | P a g e

8.2. Application of pattern INCREMENTAL STRUCTURE

8.2.1. Topics Format of Moodle course:

The folder of the Topics format contains:

lang folder: This folder contains the definition of the string variables in different languages and

in its original installation, it has only English ones. The format_topics.php file is inside this

folder.

config.php: The default blocks layout for the course format was defined in this file as

$format['defaultblocks'] .

format.php: This is core file of the format folder and it defines the layout and structure of the

format and it is loaded by wwwroot/course/view.php

lib.php: This file contains general functions for the course format Topic.

styles.css: It includes the optional stylesheet of topics format.

The above files and folders are inside the topics folder of the course format but other main files

which were used inside the format:

Moodle/course/lib.php: Library of the functions which was used by the all of the formats. The

topics format uses the‎ ‎ “print_section”‎ function for printing the topics inside the lessen and

“print_section_add_menus”‎which‎was‎ used‎ for‎ creating‎ drop-down menu which was contains

different types of the activities and resources for the courses.

Moodle/mod: This folder contained all of the course resource and activity.

8.2.2. Problem on the programming the Topics format of Moodle course

As mentioned above, the library of the course format functions was placed in the

moodle/course/lib.php file , it means, it was used with all of the other formats too then the


98 | P a g e

attempt for modifying the one function will have direct effect on the other formats and it will

crash them then the creating of sub level must be done in new defined function.

And also the topics of each lesson use the activity and resources which was defined in the

Moodle/mod. They have the fix global variable as the name and the format and etc. . . . It is one

of the important factors must be consider for avoiding the future confliction.

But the main problem is that the sub topic of each lesson was saved in database according to its

name for example the name is a string of the $modnames which can be file+lesson1 or

page+lesson1 and they don’t‎follow‎any‎structure .This feature made them movable very easy as

well as it make them hard to categorized because all of them have same level in the category.

Then the process of the creating new format in order to create different level inside the lesson

should be done as:

1. The easiest solution is that make the new format based on the Topics existing format in a

way :

Copy the Topics format to other place and rename it to sublevel or any name be

wanted

Rename the format_topics.php file to the format_sublevel.php

Change the string name of the $string['pluginname']( inside the

format_sublevel.php )from Topics format to sublevel format

Rename the all “topics” variable inside the lib.php to the “sublevel”.

2. Open the format.php file and remove the “‎ print_section($course,‎ $thissection,‎ $mods,‎

$modnamesused);” function from 242nd

line as well as the 244,245 and 246th

lines should

be removed(if ($PAGE->user_is_editing()) {print_section_add_menus($course, $section,

$modnames); }. These function are responsible for creating topics inside the lessons and

they are useless for sublevel because it should be replaced with the new functions as well

as it is better to keep these function on the 117th

until 121st for the first section.


99 | P a g e

3. Create the new functions inside the Moodle/course/lib.php in a way that every

$modusedname has different extension according to its level and saved inside the

database based on the id number of the top level as well as it is possible to modify the

activity and resource list which is inside the Moodle/mod

A Pattern language for the Moodle E-Learning Platform Appendix B

100 | P a g e

9. Appendix B

The attached CD contains:

Name Description

/Thesis It contain the pdf file of this thesis

/theme Designed themes

/PardisMasterThesis Theme for normal screen and print

/config.php

/lib.php

/renderers.php

/setting.php

/javascript

/lang

/layout

/pix

/style

/PardisMasterThesisMobile Theme for Mobile and small screen

/config.php

/lib.php

/setting.php

/lang

/layout

/pix

/style

A Pattern language for the Moodle E-Learning Platform Bibliography

101 | P a g e

10. Bibliography

Alexander, C. (1979). The timless way of building. New York: Oxford university press.

Alexander, C. (1996). Keynote speech. OOPSLA ’96:Conference on object-oriented programs,

systems, languages.

Alexander, C., Ishikwa, S., Silverstein, M., Jabcobson, M., Fisksdahl-King, I., & Angel, S.

(1979). A Patter Languages. New York: Oxford University Press.

Atwater, M. (1996). Social Constructivism: Infusion into the Multicultural Science Education

Research Agenda. JOURNAL OF RESEARCH IN SCIENCE TEACHING, 33(8), 821-837.

Beck, K., & Cunningham, W. (1987). Using Pattern Languages for Object-Oriented

Programs.Technical Report CR-87-43, Tektronix. OOPSLA'87 workshop on Specification

and Design for Object-Oriented Programming.

Borchers, J. (2001). A Pattern Approach to Interaction Design. New York: John Wiley & Sons,

Inc.

Cooper, A., Reimann, R., & Cronin, D. (2007). About Face 3 : The Essentials of Interaction

Design (3rd ed.). Indianapolis: Wiley Publishing, Inc.

Dearden, A., & Finlay, J. (2006). Pattern languages in HCI:a critical review. Human-Computer

Interaction, 21(1), 49-102.

Eckstein, J., Marquardt, K., Manns, M., & Wallingford, E. (2002). Patterns for Experiential

Learning. the sixth European conference on pattern languages of programs.‎ onstanz‎ :‎

U ,‎Universit ts-Verlag Konstanz.

Erickson, T. (2000). Lingua francas for design: Sacred places and pattern languages. the 3rd

conference on Designing interactive systems: processes, practices,methods, and

techniques (pp. 357-368). New York: ACM.


102 | P a g e

Escobar-Rodriguez, T., & Monge-Lozano, P. (2012). The acceptance of Moodle technology by

business administration students. Computers & Education, 58(4), 1085–1093.

Gamma, E., Helm, R., Johnson, R., & Vlissides, J. (1994). Design Patterns. Massachusetts:

Addison-Wesley.

Goodwin, K. (2009). Designing For the Digital Age: How to create human-centered products

and services. Indianapolis: Wiley Publishing Inc.

Goodyear, P. (2005). Educational design and networked learning: Patterns, pattern languages and

design practice. Australasian Journal of Educational Technology, 21(1), 82-101.

Graham, I. (2003). A Pattern Language for Web Usability. G.B: Pearson Education.

Griffiths,, R., Pemberton, L., Borchers, J., & Stork, A. (2000). Pattern languages for interaction

design: Building momentum. ACM, (pp. 363–363). Hague,Netherland.

Holden, G., Schadewitz, N., & Rapanta, C. (2010). Patterns for the creation of elearning content

and activities in a university setting. Proceedings of the 15th European Conference on

Pattern . NY: ACM.

Inc., A. C. (1992). the Macintosh Human Interface Guidelines . NY: Addison-Wesley

Professional.

Kohls, C., & Uttecht, J. G. (2009). Lessons learnt in mining and writing design patterns for

educational interactive graphics. Computers in Human Behavior, 25(5), 1040-1055.

Koukouletsos, K., Khazaei, B., Dearden, A., & Ozcan, M. (2009). Teaching usability principles

with pattern and guidlines. Creativity and HCI: From Experince to Design in Education,

159-174.

Marcus, A. (1991). Graphic Design for Electronic Documents and User Interfaces (ACM Press

Tutorial Series). Addison Wesley.


103 | P a g e

Niegemann, H., & Domagk, S. (2005). E-LEN project Evaluation.

Norman, D. (1990). The Design of Everyday Things (2002 ed.). U.S.A: Basic Books.

Pedagogical Patterns Editorial Board. (2012). Pedagogical Patterns: Advice For Educators. (J.

Bergin, J. Eckstein, M. Völter, & M. Sipos, Eds.) California: Joseph Bergin Software

Tools.

Remy, J. (2010). A Pattern Language for Interactive Tabletops in Collaborative Workspaces.

Aachen: RWTH Aachen University.

Rice, W. (2011). Moodle 2.0 E-Learning Course Development: A complete guide to successful

learning using Moodle. Birmingham: Packt Publishing Ltd.

Shneiderman, B., & Plaisant, C. (2010). Designing the user interface : strategies for effective

human-computer interaction (5th ed.). Amsterdam: Addison-Wesley.

Tidwell , J. (1998). Interaction design patterns" in Patterns Languages of Programs. PLOP 98.

Tidwell, J. (2005). Designing Interfaces: Patterns for Effective Interaction design (1st ed.). New

york:‎O’Reilly‎Media,‎Inc.

Tidwell, J. (2011). Designing Interfaces: Patterns for Effective In teraction (2nd‎ed.).‎O’Reilly

Media, Inc.

van Diggelen, W., & Overdijk, M. (2009). Grounded design: Design patterns as the link between

theory and practice. Computers in Human Behavior, 25(5), 1056-1066.

Van Duyne, D., Landay, J., & Hong, J. (2006). The Design of Sites: Patterns for Creating

Winning Websites (2nd ed.). Indiana: Prentic Hall.

Vora, P. (2009). Web Application Design Patterns. Canada: Elsevier Inc.

A Pattern language for the Moodle E-Learning Platform Online resouces

104 | P a g e

11. Online resouces

About Moodle. (n.d.). Retrieved 03 18, 2012, from Moodle: http://www.moodle.org

Borchers, J. (1999). The HCI Patterns Home Page. Retrieved 02 11, 2012

Corporation, M. (2010). Microsoft Inc. Retrieved 02 20, 2012, from Windows User Experience

Interaction Guidelines: http://msdn.microsoft.com/en-us/library/aa511258.aspx

Fincher, S. (2000, 08 03). HCI pattern-form Gallery. Retrieved 02 11, 2012, from

http://www.cs.kent.ac.uk/people/staff/saf/patterns/gallery.html

Group, T. H. (1997). Design Patterns Library. Retrieved 02 11, 2012, from

http://www.hillside.net/patterns

Infragistics, I. (2008). UX pattern explorer. Retrieved 02 11, 2012, from

http://quince.infragistics.com/#/Main

Moodel developer. (2011, 07 11). Retrieved from

http://docs.moodle.org/dev/Themes_2.0_extending_the_custom_menu

Moodle Plugin Directory. (2012, 05 02). Retrieved 05 28, 2012, from Moodle.org:

http://moodle.org/plugins/view.php?plugin=theme_aardvark

Toxboe, A. (2008). User Interface Design Patterns Library. Retrieved 02 11, 2012, from

http://ui-patterns.com/

Van Welie, M. (2000). A Pattern Library for Interaction design. Retrieved 02 11, 2012, from

http://welie.com

Yahoo!, I. (2005). Yahoo! Design Pattern Library. Retrieved 02 11, 2012, from

http://developer.yahoo.com/ypatterns/

http://msdn.microsoft.com/en-us/library/aa511258.aspx