ENGLISH LANGUAGE
CONTENTS
INTRODUCTION ................................................................................................................. 3 1. ACCESSING THE GAME .............................................................................................. 5 2. PLAYING THE GAME................................................................................................... 8 3. THE MENU BAR OF THE GAME .............................................................................29
2
INTRODUCTION
The computer is used by teachers in the teaching-learning process and has consequently become indispensable for modern education, being a modern means of education due to its attractive virtues for students, its accessibility and the facility of conveying information. The use of the computer in education has the advantage of facilitating the transition from the passive acquisition of information by the students to learning through discovery, thus developing cognitive skills and strategies to be used and adapted in various situations. This determines great flexibility of learning and student motivation in order to get involved in the education process and become partners of the teacher in class. The education software can also represent a tool which can be used by the student in order to learn by exploration. The simulations used within the virtual lessons are often spectacular for the students. The understanding of various processes and phenomena is substantially facilitated by offering visual support for the students and thus they become more motivated to participate in the lesson and learn. In order to attract students towards school, one can create an environment which could replace, to a certain extent, their interest in computer games, in other words we can choose to use video games for a certain topic in the teaching-learning and assessment process. The concept of innovation in this project is defined as a change which will be inserted in the educational context with the aim of improving the delivery of the curriculum for the Information and communication technology discipline, the performance and satisfaction perceived by the main actors (students, trainers and employers). It goes without saying that innovation develops dynamically and the developed project will present flexibility in order to ensure that the final products meet the current demand and can be adapted and developed to provide durability.
3
There are benefits due to the collaboration in the domains of interest predetermined, as colleagues will understand the context and the challenges generated by this kind of innovation while being implemented. This is possible due to the challenge continuously faced by the technical sector in Europe: schools are encouraged to embrace innovation, to adapt to the changing working environment and, not least, as a consequence of the rapid change of technology and social environment which require this kind of flexibility imperatively. Thus we created, within the ERASMUS+ 2014 KA2 Project: Strategic Partnership: 2014-1-UK01-KA202-001658 with the title Vocational Training in Programming Skills Using a Game-based Approach: V-Game, an educational game which is aimed at helping high school and further education students to learn information and communication technology as part of their curriculum, and through doing so to understand the necessary knowledge to create web pages, using HTML5, CSS and JAVA. The following manual contains the most important instructions for accessing and using the game in order to learn how to create web pages, called the V-Game.
4
1. ACCESSING THE GAME The game can be accessed on any computer with Windows operating system and internet connection. Also an internet browser is required, preferably Google Chrome. The internet address of the game is: http://www.pyvi.eu/v-game9.1/ The V-Game opens with the users’ registration page, as one can see below, in Figure 1. The users can be teachers, students or any other stakeholder who wishes to learn the basic knowledge in order to create web pages.
Figure 1. To create an account and consequently open the game, access Register and a new page will appear (as seen in Figure 2) requiring the user’s first name, last name, email address, the country can be selected (a list of the countries participating in the project will appear), type your password and confirm it. Then the user is required to select a character (a girl or a boy) by a click of the mouse. Once all the data is provided, the user can access the button Register for user.
5
Figure 2. Then the user inserts the email address and the password on the start page of the game and presses the Login button thus connecting to the game and providing access to the main page. The following message will appear „Welcome, please enter�, as seen in Figure 3 and the user will press the Welcome button.
6
Figure 3. After this message the interface of the V-game appears and it can be run through step by step, level by level.
7
2. PLAYING THE GAME
After following the previous steps regarding registration and log in, the user will unfold, step by step, the five levels of the game, corresponding to five learning levels. These five levels are:
Level 1 – HTML 5
Level 2 – CSS
Level 3 – JAVASCRIPT BEGINNER
Level 4 – JAVASCRIPT INTERMEDIATE
Level 5 – JAVASCRIPT ADVANCED
Figure 4. As one can see in Figure 4, there is a V-GAME logo and identification number of the Erasmus+ project on the screen. From this moment on the game starts with the first level, respectively Level 1 – HTML 5. 8
It can be noticed in Figure 5 that the game begins with a dialogue between the teacher and the student, in which the teacher introduces the student in the topic of the game, announcing that they will learn HTML, CSS and JavaScript.
Figure 5. The conversation continues with the teacher announcing an interactive game which will develop the students’ skills and teach them how to create their own web pages. This game can be played by both multiple users at the same time and by a single user. Also the teacher presents the fact that the users must run through five levels by the end of the game, during which they will learn about:
HTML 5 – Level 1
CSS – Level 2
JAVASCRIPT BEGINNER – Level 3
JAVASCRIPT INTERMEDIATE – Level 4
JAVASCRIPT ADVANCED – Level 5 They are all presented in Figure 6.
9
Figure 6. In figure 7 one can see a conversation between the students who think that this game, which is in fact a programming lesson to create web pages, can improve their personal development and contribute to the acquisition of financial benefits. They are anxious and excited to see how this game unfolds.
Figure 7.
10
Everything a person who doesn’t possess basic knowledge in this field needs can be learned through the V-game discovered by the students. Their excitement is presented in Figure 8.
Figure 8. The female student is anxious to go through the first day in order to learn the HTML language. With this the first level of the V-Game starts. (Figure 9).
Figure 9. 11
Figure 10. The first level begins with several introductory concepts regarding the HTML language, as presented in Figure 10. All the lessons are displayed as short films which can be stopped at any moment during the presentation.
Figure 11. The game continues with a mini-test which uses two of the concepts presented previously. The students have to fill in the gaps with the correct answers. (Figure 11)
12
For each correct answer, by pressing the Next button, the student receives points and can move on to the next lesson. In Figure 12 one can see how to fill in the gaps appropriately.
Figure 12. The student can resume the test if they press the Back button in the menu toolbar and can retake the test or press the Hint button and the message in Figure 13 will appear.
Figure 13.
13
Once the Next button is pressed (if the student has finished the test) or Skip (in case the students doesn’t want to complete the test) a message will appear, stating the acquired points and coins and the correct answers (Figure 14). These answers are aimed at strengthening the knowledge acquired so far. For the next lesson, press the Next button.
Figure 14. The game continues by presenting several tags which are essential to the HTML language, as can be seen in Figure 15, and their order when creating a HTML program. The HTML, HEAD, TITLE and BODY tags are presented both in the short film and below the screen, detailing on their use in the programming language. In order to move on, the students will press the Next button and, if they want to resume the previous information, they will press the Back button.
14
Figure 15. The next step, as seen in Figure 16, is a new mini-test in which the students are required to order the tags previously learnt. These can be ordered by using the �drag and drop� technique, in other words by pressing the left button of the mouse one can move a button lower or higher and then release the button. The same applies for all the buttons until the answer is considered correct. The Next button will be pressed to see the results.
Figure 16. 15
If the answer is wrong the message in Figure 17 will appear, and in this case there are two possibilities, respectively to retake the test by pressing the Next button or to skip this test by pressing the Skip button, without acquiring points or coins in the latter.
Figure 17. The next lesson refers to the Paragraph tag and its use in the program. (Figure 18)
Figure 18.
16
This lesson provides two mini-tests. The first mini-test (Figure 19) which has two questions and four possible options, only one being the correct answer, can be solved by selecting one of the options with a click of the mouse. If the Skip button is pressed, one can go to the next lesson without taking this test.
Figure 19. If the Next button is pressed, a message displaying all the acquired points and the correct answers will appear, as seen in Figure 20.
17
Figure 20. The second mini-test refers to all the acquired knowledge so far and Figure 21 displays how to solve these multiple-choice tests.
Figure 21. As seen in Figure 22, if the Next button is pressed a message displaying all the acquired points and the correct answers will appear, as in the previous tests.
Figure 22. 18
Throughout the game, from time to time, the students appear with dialogues regarding how they felt while learning HTML. In Figure 23 one can notice the progress regarding the unfolded lessons, respectively the number of points obtained on the bottom right corner of the screen and the number of coins on the bottom left corner of the screen. The coins can be used to buy clothes in order to change the outfit of the selected girl or boy, as will be seen later.
Figure23. In the next lesson two new tags in the HTML program are presented, respectively br to create a blank line within a text and hr to create a horizontal line. (Figure 24) The order of tags in the HTML program is also presented.
19
Figure 24. After each lesson there is a test to be taken which displays the answers in a green box, specifying the number of acquired points at each test, as seen in Figure 25.
Figure 25. Figure 26 displays a new dialogue between the students regarding the previous lessons. 20
Figure 26. Step by step, the lessons are presented successively so that the students scour from the simplest tags to the most complex. It can be noted in the progress bar that level 1 was completed in a proportion of 67%. In Figure 27 the student already learns how to create a hyperlink to a photo, for example, with regard to a web page.
Figure 27. 21
The students approach the end of level 1, with more and more complex instructions (Figure 28), instructions regarding the type of html used to write the program, so that it can be recognized by the browser.
Figure 28. Figure 29 displays the way in which the student is notified with respect to the completion of a level. This kind of message appears after each completed level.
Figure 29. 22
This is where level 2 begins, reading through the CSS (Cascading Style Sheets) program. Level 2, as we have been already accustomed, starts with a dialogue between students who think that this level is more difficult. (Figure 30)
Figure 30. Level 2 begins with several introductory concepts about the importance of CSS in creating web pages, as displayed in Figure 31.
Figure31. 23
In figure 32 there is information related to the styles in the CSS language, namely the embedded style.
Figure 32. The next presentation (Figure 33) highlights the way the internal styles are embedded in the created web page program.
Figure 33. In Figure 34 the external style is implemented in a created web program. 24
Figure 34. Another element in the CSS program are the selectors, one of them being displayed in the figure below. (Figure 35).
Figure 35.
Figure 36 shows how the selectors with the same style definition are grouped. 25
Figure 36. When web pages are created, fonts are used and defined by certain properties, as seen in Figure 37.
Figure 37. Figure 38 shows how to create a text box with certain specifications.
26
Figure 38. Towards the end of level 2 the students will be able to arrange and align the blocks on a web page (Figure 39) and a text showing, as in the previous level, the number of acquired points will be displayed. (Figure 40).
Figure 39.
27
Figure 40. After the final test, Level 2 has been completed and Level 3 begins. The following levels are run through the same as the previous ones. Each level contains short films which present theoretical content as well as mini-tests and more difficult tests and exercises at the end of each level. Also the students meet the teacher or engage in conversation among each other with regard to the content of the five levels of the game.
28
3. THE MENU BAR OF THE GAME The V-Game presented here, having been created as a web page, contains a menu bar which will be detailed further on in the following pictures. The Start button in the menu bar starts the game or resumes it at the stage where the user stopped. As mentioned earlier, the game starts by presenting the logo of the project, respectively of the V-Game (Figure 41) and continues with its Level.
Figure 41.
29
The Statistic button presents the statistics regarding the users who have accessed this game and the number of points acquired by them. They are presented as a table containing the name of the user, the number of acquired points and the user’s country. This menu can be accessed at any stage during the game.
Figure 42. By a click of the mouse one can select a certain person and with the help of the leftright arrows one can move from a page to the other and with the upward arrow it is possible to go back to the first users’ page. This is shown in Figure 43, where it can be noted that the selected person is highlighted in blue.
30
Figure43. If the user wishes to return to one of the previous pages, they can do that with the help of the Back button in the menu bar. In this case the message in Figure 44 will appear, mentioning the fact that the user has moved back and they can proceed by clicking the Start button.
Figure 44.
31
With the help of the Groups button in the menu bar in Figure 45, one can create a group of users.
Figure 45. For example, if a teacher intends to use this game in class and wishes to follow the students’ accomplishments, they can add the students by clicking the Add button. After adding the users a message will appear in a green box to announce the completion of the task, Figure 46. Thus, the teacher can add as many users as they wish and keep track of the number of points acquired by every student, the number of coins obtained which equal the number of points, the level reached by the user and the number of lessons.
32
Figure 46. By clicking the Last level reset button in the menu bar, the user can return to the previous level and erase all the points and coins gained during the deleted level. This level will start all over again and the user will gradually acquire points and coins again as the level unfold.
Figure 47. 33
The Shop button in the menu bar opens a window which displays a shop. With the help of the acquired coins, the user can buy various clothes; both for girls and boys, and the user can change its appearance on the screen, the number of coins decreasing in accordance with the number of items bought by the user. If the user clicks on the My stuff button the screen will display all the products acquired in the shop. (Figure 48)
Figure 48. 34
Another button in the menu bar is the Award board, which reveals the number of levels run through by the user, represented by V-GAME medals. If the user clicks on the Print certificate button, they will be able to save a web page in order to print the certificates of competences. These certificates can be printed after finishing each level, showing the skills acquired at a certain stage, displaying the print date and information regarding the completed levels, the number of resets at each level, the number of lessons, the number of acquired points and the levels to be completed. Figure 49 and Figure 50 show the action of the Award button and the design of a printed certificate.
Figure 49.
35
Figure 50. Another button in the menu bar is the Help button which opens a submenu where all the videos at every level of the game can be accessed with the help of the Video button, the user being able to read through all the theoretical concepts as many times they wish. (Figure 51)
Figure51. 36
With the Help button, the user can access the electronic book, E-book, created within this Erasmus+ project, which presents theoretical concepts regarding web page creation using HTML 5, CSS and JAVASCRIPT, with the help of the E-book button. (Figure 52)
Figure52. Also with the Help button the user can access, through the User manual button, this electronic manual describing all the steps in playing this V-Game. (Figure 53)
Figure 53.
37
Through the Help button, one can access the About button which opens the official web page of the V-Game project - Vocational Training in Programming Skills Using a GameBased Approach, in which all the objectives of the project, the partners and the unfolded activities are presented. (Figure 54)
Figure 54.
38
The last button in the menu bar is the Logout button which helps the user to disconnect from the game. (Figure 55) The game can be resumed by logging with the email address and the password of each user. (Figure 1).
Figure 55.
WE WISH ALL THE V-GAME USERS GOOD LUCK!
39