1,486
edits
Changes
From Open Educational Resources
→Hotspot image connector
==== Login and Logout ====
==== Login and Logout ====
* Once you have your login information, you can log in to https://karnatakaeducation.org.in/lcads/ webpage, as shown in Figure 1 by entering the credentials.
* Once you have your login information, you can log in to https://karnatakaeducation.org.in/lcads/ webpage, as shown in Fig1 by entering the credentials.
<gallery mode="packed" heights="300px">
<gallery mode="packed" heights="300px">
</gallery>
</gallery>
* As seen in Fig. 2, you can log out of your profile by clicking the "logout" button.
* As seen in Fig2, you can log out of your profile by clicking the "logout" button.
<gallery mode="packed" heights="300px">
<gallery mode="packed" heights="300px">
File:Logout Option.png|Fig2: Logout option
File:Logout Option.png|Fig2: Logout option
==== Interface of tool ====
==== Interface of tool ====
The Xerte online tool's interface is depicted in Figure. 3, and the marked areas are described in full below for your reference.
The Xerte online tool's interface is depicted in Fig3, and the marked areas are described in full below for your reference.
<gallery mode="packed" heights="430px">
<gallery mode="packed" heights="430px">
File:Fig 3- Interface main page.png|Fig3: Interface main page
File:Fig 3- Interface main page.png|Fig3: Interface main page
# '''Publish:''' It is utilized to maintain control over the project specifics, license, and access.
# '''Publish:''' It is utilized to maintain control over the project specifics, license, and access.
# '''URL of Xerte tool:''' This is the URL for the Xerte online tool, which is embedded in the Karnataka Education server.
# '''URL of Xerte tool:''' This is the URL for the Xerte online tool, which is embedded in the Karnataka Education server.
# '''Folder structure:''' Created folders or directories will appear as shown in Figure 3, numbered 9.
# '''Folder structure:''' Created folders or directories will appear as shown in Fig3, numbered 9.
# '''Created project:''' Created projects will appear as shown in Figure 3, numbered 10.
# '''Created project:''' Created projects will appear as shown in Fig
# 3, numbered 10.
# '''Search:''' It is used to search for a certain project or folder by name or keyword.
# '''Search:''' It is used to search for a certain project or folder by name or keyword.
# '''Sort option:''' Sorting by name (from ‘A to Z’ and ‘Z to A’) and by age (from ‘new to old’ and ‘old to new’) is made easier with the help of this option.
# '''Sort option:''' Sorting by name (from ‘A to Z’ and ‘Z to A’) and by age (from ‘new to old’ and ‘old to new’) is made easier with the help of this option.
=== Creating/Editing project ===
=== Creating/Editing project ===
The Xerte project is incredibly easy to create and edit. Click the "create" button to start a new project, and to edit click on the “edit” button, as indicated above (Figure 3), to make changes. You may now see all the components or alternatives that Xerte offers to enhance the richness and interactivity of your projects. As soon as you begin developing or changing your project, click the ‘insert’ button (as shown in Figure 5) to access further options and add any Xerte elements that are accessible.
The Xerte project is incredibly easy to create and edit. Click the "create" button to start a new project, and to edit click on the “edit” button, as indicated above (Fig3), to make changes. You may now see all the components or alternatives that Xerte offers to enhance the richness and interactivity of your projects. As soon as you begin developing or changing your project, click the ‘insert’ button (as shown in Fig5) to access further options and add any Xerte elements that are accessible.
'''NOTE :''' Whenever you want to add an element to the Xerte project, once you choose the element type, you would have three options.
'''NOTE :''' Whenever you want to add an element to the Xerte project, once you choose the element type, you would have three options.
The user should select "Insert --> Media --> Audio slideshow" to use this element.
The user should select "Insert --> Media --> Audio slideshow" to use this element.
Once the element has been added, the user can upload audio by selecting the "import media" option, which will open the new window depicted in (figure 6). Users can choose audio from their system by clicking the "no files selected" (figure 7) button and then click "upload."
Once the element has been added, the user can upload audio by selecting the "import media" option, which will open the new window depicted in (Fig6). Users can choose audio from their system by clicking the "no files selected" (Fig7) button and then click "upload."
After uploading is complete, the user can effectively add a file to the project by double-clicking on it. Using the same technique, the user can also add photos to the project, sync the images, and add audio by adding the audio in seconds format in sync points. Additionally, users can format their text content by selecting the "Show toolbar" option, and they can even alter the page's title. Please go through the sample below.<gallery mode="packed" heights="300px">
After uploading is complete, the user can effectively add a file to the project by double-clicking on it. Using the same technique, the user can also add photos to the project, sync the images, and add audio by adding the audio in seconds format in sync points. Additionally, users can format their text content by selecting the "Show toolbar" option, and they can even alter the page's title. Please go through the sample below.<gallery mode="packed" heights="300px">
To include a PDF file in the project, user must select "Insert→media→pdf file".
To include a PDF file in the project, user must select "Insert→media→pdf file".
Once the PDF element has been added, the user can upload the PDF by selecting "import media". A new window will appear (figure 6). Users can choose a PDF file from their computer by clicking the "no files selected" (figure 7) button, then browse for the file and click "upload." The user can effectively add a file to the project by double-clicking it after uploading it to the Xerte tool. User can edit the title of the element by using the first text box.
Once the PDF element has been added, the user can upload the PDF by selecting "import media". A new window will appear (Fig6). Users can choose a PDF file from their computer by clicking the "no files selected" (Fig7) button, then browse for the file and click "upload." The user can effectively add a file to the project by double-clicking it after uploading it to the Xerte tool. User can edit the title of the element by using the first text box.
<gallery mode="packed" heights="300px">
<gallery mode="packed" heights="300px">
File:Fig10 Adding pdf to the project.png|Fig10: Adding pdf to the project
File:Fig10 Adding pdf to the project.png|Fig10: Adding pdf to the project
To use this element user should click on “insert→media→transcript reader”.
To use this element user should click on “insert→media→transcript reader”.
Once the element has been added, user can upload the audio by clicking the “import media” button which will pop a new window as shown in Figure 6, where the user can click on the “no files selected” (Figure 7) button and can browse the computer to select the audio. Click on upload. Once the file is uploaded, user can double-click on the file to get it added to the project. To add the text to make it synch with audio, click New text. It shows another page where user can add text and in the synch point mention the timing of audio in seconds format. For example, if the text is starting from 12<sup>th</sup> second, mention 12 in the synch point. On the other side, text can be formatted by clicking on “Show toolbar” option and can change the title of the page as well. Please go through the below example (Figure 11 and 12).
Once the element has been added, user can upload the audio by clicking the “import media” button which will pop a new window as shown in Fig6, where the user can click on the “no files selected” (Fig7) button and can browse the computer to select the audio. Click on upload. Once the file is uploaded, user can double-click on the file to get it added to the project. To add the text to make it synch with audio, click New text. It shows another page where user can add text and in the synch point mention the timing of audio in seconds format. For example, if the text is starting from 12<sup>th</sup> second, mention 12 in the synch point. On the other side, text can be formatted by clicking on “Show toolbar” option and can change the title of the page as well. Please go through the below example (Figs11 and 12).
<gallery mode="packed" heights="350px">
<gallery mode="packed" heights="350px">
File:Fig11 Adding the audio to the project.png|Fig11: Adding the audio to the project
File:Fig11 Adding the audio to the project.png|Fig11: Adding the audio to the project
To use this element user should click on “Insert--> Media--> Video”.
To use this element user should click on “Insert--> Media--> Video”.
Once video element is added, user can upload the video by clicking the “Import media” button which will pop a new window shown in Figure 6. User can click on the “no files selected” (Figure 7) button and can select the video from their system and click on upload by browsing the file. Once uploading is done user can double-click on the file to add it to the project effectively. User can change the page title, add the description for video as shown in below image. (Figure 13 and 14)
Once video element is added, user can upload the video by clicking the “Import media” button which will pop a new window shown in Fig6. User can click on the “no files selected” (Fig7) button and can select the video from their system and click on upload by browsing the file. Once uploading is done user can double-click on the file to add it to the project effectively. User can change the page title, add the description for video as shown in below image. (Figs13 and 14)
<gallery mode="packed" heights="350px">
<gallery mode="packed" heights="300px">
File:Fig13 Adding the Video to the project.png|Fig13: Adding the Video to the project
File:Fig13 Adding the Video to the project.png|Fig13: Adding the Video to the project
File:Fig14 After adding the image changing the page title and adding the description.png|Fig14: After adding the image changing the page title and adding the description
File:Fig14 After adding the image changing the page title and adding the description.png|Fig14: After adding the image changing the page title and adding the description
</gallery>
</gallery>
The user should select "insert→navigators→flashcard" to use this component.
The user should select "insert→navigators→flashcard" to use this component.
When the element has been added, the user can add the page title and text for the page in accordance with the requirements. To add a flashcard to the project, the user should click "new card" as shown in the image below (Figure 15). Once the user clicks on ‘new card’, a new page will appear in which the user can add an image and an audio file as shown in (Figure 16) and text in accordance with the user’s requirements on both sides.
When the element has been added, the user can add the page title and text for the page in accordance with the requirements. To add a flashcard to the project, the user should click "new card" as shown in the image below (Fig15). Once the user clicks on ‘new card’, a new page will appear in which the user can add an image and an audio file as shown in (Fig16) and text in accordance with the user’s requirements on both sides.
<gallery mode="packed" heights="300px">
<gallery mode="packed" heights="300px">
File:Fig15 Adding the flashcard.png|Fig15: Adding the flashcard
File:Fig15 Adding the flashcard.png|Fig15: Adding the flashcard
File:Fig16 Adding the content to the both the sides of flashcard.png|Fig16: Adding the content to the both the sides of flashcard
File:Fig16 Adding the content to the both the sides of flashcard.png|Fig16: Adding the content to the both the sides of flashcard
</gallery>
</gallery>
The user needs select "insert→connectors→hotspot image connector" and then "hotspot image connector" to use this element.
The user needs select "insert→connectors→hotspot image connector" and then "hotspot image connector" to use this element.
Users have the option of adding the page title, page content, text alignment, and highlight hotspot option, which can highlight an image while the project is being played, the size of the picture, and the activity description.<gallery mode="packed" heights="350px">
Users have the option of adding the page title, page content, text alignment, and highlight hotspot option, which can highlight an image while the project is being played, the size of the picture, and the activity description.
<gallery mode="packed" heights="350px">
File:Fig17 Various option of hotspot image connector.png|Fig17: Various option of hotspot image connector
File:Fig17 Various option of hotspot image connector.png|Fig17: Various option of hotspot image connector
File:Fig18 Merged similar images as single image.jpg|Fig18: Merged similar images as single image
File:Fig18 Merged similar images as single image.jpg|Fig18: Merged similar images as single image
</gallery>After inserting the image user should click on the new hotspot which will take the user to a new page. On the new page, double-click on “edit hotspot”, it will open the image and allow the user to mark the difference. Once a marking is done user should click on “new hotspot” to add the next marking difference.
</gallery>
'''Note:''' We advise users to combine two similar-type photographs that are side by side before uploading them. After that, they can submit the combined image to the element as shown in the below image.
After inserting the image user should click on the new hotspot which will take the user to a new page. On the new page, double-click on “edit hotspot”, it will open the image and allow the user to mark the difference. Once a marking is done user should click on “new hotspot” to add the next marking difference.
<gallery mode="packed" heights="300px">
<gallery mode="packed" heights="300px">
File:Fig19 Marking the hotspot (Difference).png|Fig19 Marking the hotspot (Difference)
File:Fig19 Marking the hotspot (Difference).png|Fig19 Marking the hotspot (Difference)
File:Fig20 Adding the 2nd hotspot.png|Fig20: Adding the 2nd hotspot
File:Fig20 Adding the 2nd hotspot.png|Fig20: Adding the 2nd hotspot
</gallery>
</gallery>
The user should select "insert→interactive tools→dictation" and then "dictation" to use this element.
The user should select "insert→interactive tools→dictation" and then "dictation" to use this element.
The user should then select ‘new sentence’ (Figure 21) to add content. This will take the user to a new page where the user can add images from the toolbar and label the content as well as audio and answer text (Figure 22). When the user enters text in the answer text box, it will give feedback as ‘correct’, if the answer matches the answer text; if it doesn't match, it will give feedback as ‘Incorrect’. The user must select "new sentence" again to add the subsequent piece of content. The user can alter the page title or text on the main page after adding the dictation to the project.
The user should then select ‘new sentence’ (Fig21) to add content. This will take the user to a new page where the user can add images from the toolbar and label the content as well as audio and answer text (Fig22). When the user enters text in the answer text box, it will give feedback as ‘correct’, if the answer matches the answer text; if it doesn't match, it will give feedback as ‘Incorrect’. The user must select "new sentence" again to add the subsequent piece of content. The user can alter the page title or text on the main page after adding the dictation to the project.
<gallery mode="packed" heights="350px">
<gallery mode="packed" heights="350px">
File:Fig21 Adding the dictation.png|Fig21: Adding the dictation
File:Fig21 Adding the dictation.png|Fig21: Adding the dictation
The user should select "insert→interactive tools→gap fill" to utilize this element.
The user should select "insert→interactive tools→gap fill" to utilize this element.
Once the gap fill page has been added to the project, the user can edit its title, introductory text, gap fill text (content for the project), type of interactivity (drag and drop, fill in the blanks, or drop-down menu), and various options in the gap fill text box (Figure 23).
Once the gap fill page has been added to the project, the user can edit its title, introductory text, gap fill text (content for the project), type of interactivity (drag and drop, fill in the blanks, or drop-down menu), and various options in the gap fill text box (Fig23).
<gallery mode="packed" heights="350px">
<gallery mode="packed" heights="350px">
===== Drag and Drop =====
===== Drag and Drop =====
User can mark the response after entering information in the gap fill textbox by "selecting the answer→ Right click→ Mark word". User can also add several distractors or options from optional attributes to the user to select the correct answer from a variety of options (Figure 24).
User can mark the response after entering information in the gap fill textbox by "selecting the answer→ Right click→ Mark word". User can also add several distractors or options from optional attributes to the user to select the correct answer from a variety of options (Fig24).
<gallery mode="packed" heights="350px">
<gallery mode="packed" heights="350px">
File:Fig24 Selecting Mark word option for answer.png|Fig24: Selecting Mark word option for answer
File:Fig24 Selecting Mark word option for answer.png|Fig24: Selecting Mark word option for answer
</gallery>
</gallery>
There may be a case where you want to use images than words as answers, follow the same steps as above, to add a picture as answer. But instead of selecting "Mark word," choose the answer text that appears in the vertical bar | | (Figure 25). Next, upload the image by turning on the show toolbar option.
There may be a case where you want to use images than words as answers, follow the same steps as above, to add a picture as answer. But instead of selecting "Mark word," choose the answer text that appears in the vertical bar | | (Fig25). Next, upload the image by turning on the show toolbar option.
<gallery mode="packed" heights="350px">
<gallery mode="packed" heights="350px">
File:Fig25 Marking images as answer.png|Fig25: Marking images as answer
File:Fig25 Marking images as answer.png|Fig25: Marking images as answer
===== Fill in blank =====
===== Fill in blank =====
The user can mark the answer by "selecting the answer→ Right click→ Mark word" after entering content in the gap fill text box. This option does not allow for the addition of images; instead, the user can only enter text in this manner (Figure 26 and 27).
The user can mark the answer by "selecting the answer→ Right click→ Mark word" after entering content in the gap fill text box. This option does not allow for the addition of images; instead, the user can only enter text in this manner (Figs26 and 27).
<gallery mode="packed" heights="380px">
<gallery mode="packed" heights="380px">
File:Fig26 Marking the answer and selecting option as fill in the blank.png|Fig26: Marking the answer and selecting option as fill in the blank
File:Fig26 Marking the answer and selecting option as fill in the blank.png|Fig26: Marking the answer and selecting option as fill in the blank
===== Drop down menu =====
===== Drop down menu =====
The user can mark the answer by "selecting the answer→ Right click→ Mark word" after adding content to the gap-fill text box. In this option, the user cannot upload a picture; they are only able to provide words. The user can enter numerous responses inside the vertical bar | |, each answer being separated by the forward slash "/". The correct answer should be placed first, followed by a / add the distractors (many alternatives) (Figure 28).
The user can mark the answer by "selecting the answer→ Right click→ Mark word" after adding content to the gap-fill text box. In this option, the user cannot upload a picture; they are only able to provide words. The user can enter numerous responses inside the vertical bar | |, each answer being separated by the forward slash "/". The correct answer should be placed first, followed by a / add the distractors (many alternatives) (Fig28).
<gallery mode="packed" heights="350px">
<gallery mode="packed" heights="350px">
File:Fig28 Marking the answer and Choosing the down down option.png|Fig28: Marking the answer and Choosing the down down option
File:Fig28 Marking the answer and Choosing the down down option.png|Fig28: Marking the answer and Choosing the down down option
</gallery>
</gallery>
'''Note:''' The user should activate the "Mark at end" option from the optional properties which allows the end user to choose the wrong answers. Then, after clicking "Submit" the end user will receive feedback on whether the selected response is correct or incorrect. (Figure 29 and 30).
'''Note:''' The user should activate the "Mark at end" option from the optional properties which allows the end user to choose the wrong answers. Then, after clicking "Submit" the end user will receive feedback on whether the selected response is correct or incorrect. (Figs29 and 30).
<gallery mode="packed" heights="350px">
<gallery mode="packed" heights="350px">
File:Fig29 Adding Mark at end.png|Fig29: Adding Mark at end
File:Fig29 Adding Mark at end.png|Fig29: Adding Mark at end
The user should choose "insert→interactive tools→Matching text" to utilize this element.
The user should choose "insert→interactive tools→Matching text" to utilize this element.
The user can add the "page title, introduction text, feedback, and attempts before hint". Once the user adds the matching text page to the project, should also add the "mark at end" option. The user must select "New sentence" from the menu in order to enter content (Figure 31).
The user can add the "page title, introduction text, feedback, and attempts before hint". Once the user adds the matching text page to the project, should also add the "mark at end" option. The user must select "New sentence" from the menu in order to enter content (Fig31).
<gallery mode="packed" heights="400px">
After selecting "New sentence," the user may add a picture, text, or audio in part 1 and the same in part 2 so that part 1 and part 2 can be matched appropriately by the end user. To add the next content, the user should click on "New sentence" again (Figure 32).
File:Fig31 Adding the details in matching text main page and adding "mark at end" option.png|Fig31: Adding the details in matching text main page and adding "mark at end" option
</gallery>
After selecting "New sentence," the user may add a picture, text, or audio in part 1 and the same in part 2 so that part 1 and part 2 can be matched appropriately by the end user. To add the next content, the user should click on "New sentence" again (Fig32).
<gallery mode="packed" heights="400px">
File:Fig32 Adding the content to matching the text.png|Fig32: Adding the content to matching the text
</gallery>
===== Multiple choice question =====
===== Multiple choice question =====
Click "insert→interactive tools→Multiple choice question" to utilize this element.
Click "insert→interactive tools→Multiple choice question" to utilize this element.
The user may then add the page title, text alignment, introduction text, question, question type (whether single answer or multiple response), and panel width after adding the multiple choice question page to the project. The user must select "New Answer" from the menu in order to add the answer (Figure 33).
The user may then add the page title, text alignment, introduction text, question, question type (whether single answer or multiple response), and panel width after adding the multiple choice question page to the project. The user must select "New Answer" from the menu in order to add the answer (Fig33).
<gallery mode="packed" heights="400px">
File:Fig33 Adding the details and question to the multiple choice question main page and clicking on new answer.png|Fig33: Adding the details and question to the multiple choice question main page and clicking on new answer
</gallery>
Once the user finishes selecting "New answer", a new page (Figure 34) will appear to make it a single answer, the user must choose as ‘single answer’ from the main page; to make it numerous answers, should select multiple answers from the main page (Figure 33).
Once the user finishes selecting "New answer", a new page (Fig34) will appear to make it a single answer, the user must choose as ‘single answer’ from the main page; to make it numerous answers, should select multiple answers from the main page (Fig33).
The user should include two "New answers" for questions of the true-false variety.
The user should include two "New answers" for questions of the true-false variety.
'''Note:''' On the New Answer screen, the user should pick the right answer as true and the incorrect response as false.
'''Note:''' On the New Answer screen, the user should pick the right answer as true and the incorrect response as false.
<gallery mode="packed" heights="400px">
File:Fig34 Adding the answers for multiple choice questions.png|Fig34: Adding the answers for multiple choice questions
</gallery>
===== Sortable grid =====
===== Sortable grid =====
The user should choose "insert→interactive tools→Sortable Grid" to utilize this element.
The user should choose "insert→interactive tools→Sortable Grid" to utilize this element.
After adding the sortable grid page to the project, the user may then add the page title, page text, feedback (fig. 35), and content to the provided table in the appropriate order. For example, by adding the first word or image to the first column, the second to the second column, and so on.
After adding the sortable grid page to the project, the user may then add the page title, page text, feedback (Fig35), and content to the provided table in the appropriate order. For example, by adding the first word or image to the first column, the second to the second column, and so on.
<gallery mode="packed" heights="400px">
File:Fig35 Adding the details to the main page.png|Fig35: Adding the details to the main page
File:Fig36 Adding the data to the table.png|Fig36: Adding the data to the table
</gallery>
'''Note:''' Double-clicking on data cells in tables will allow you to add content (fig. 37). To change the number of rows and columns, click the add column and add row buttons, respectively.
'''Note:''' Double-clicking on data cells in tables will allow you to add content (Fig37). To change the number of rows and columns, click the add column and add row buttons, respectively.
<gallery mode="packed" heights="400px">
File:Fig37 Adding images and columns.png|Fig37: Adding images and columns
</gallery>
==== Inserting Gaming tools ====
==== Inserting Gaming tools ====
When adding the Hangman page to the project is complete, the user can enter the page's title, instructions, and content in the words column.
When adding the Hangman page to the project is complete, the user can enter the page's title, instructions, and content in the words column.
In the instructions field, question can be added and the corresponding answer can be filled in the ‘words’ field as shown in Figure 38.
In the instructions field, question can be added and the corresponding answer can be filled in the ‘words’ field as shown in Fig38.
<gallery mode="packed" heights="400px">
File:Fig38 Adding the details and content to the hangman page.png|Fig38: Adding the details and content to the hangman page
</gallery>
The user is given the opportunity to input the phrases, and if they type the incorrect words instead of the ones that are provided, a man-hanging sketch will begin to appear. Either the end user types the entire answer correctly, the game ends with the sketch of a man hanging otherwise as shown in Figure 39.
The user is given the opportunity to input the phrases, and if they type the incorrect words instead of the ones that are provided, a man-hanging sketch will begin to appear. Either the end user types the entire answer correctly, the game ends with the sketch of a man hanging otherwise as shown in Fig39.
<gallery mode="packed" heights="400px">
File:Fig39 Preview page of hangman game.png|Fig39: Preview page of hangman game
</gallery>
===== Memory game =====
===== Memory game =====
The user should select "insert→Games→Memory game" to use this component.
The user should select "insert→Games→Memory game" to use this component.
Once the user has added the ‘Memory Game’ page to the project, the user can add the page title. To add the content, the user should click on "new item," which will open a new page. User should click on "label image" from the optional properties, which will get added to the project. After this, the user should upload the same image as the label image, and to add the next image, the user should click on new item again and follow the same process (Figure 40).
Once the user has added the ‘Memory Game’ page to the project, the user can add the page title. To add the content, the user should click on "new item," which will open a new page. User should click on "label image" from the optional properties, which will get added to the project. After this, the user should upload the same image as the label image, and to add the next image, the user should click on new item again and follow the same process (Fig40).
<gallery mode="packed" heights="400px">
File:Fig40 Adding the Label image to the project.png|Fig40: Adding the Label image to the project
</gallery>
The system is designed such that when the user clicks on a card, it flips over and displays an image, prompting them to look for that image elsewhere on the page. Two photos will be combined into one when they matched successfully as shown in Figure 41.
The system is designed such that when the user clicks on a card, it flips over and displays an image, prompting them to look for that image elsewhere on the page. Two photos will be combined into one when they matched successfully as shown in Fig41.
<gallery mode="packed" heights="400px">
File:Fig41 After adding the images to image and label image.png|Fig41: After adding the images to image and label image
File:Fig42 Preview page.png|Fig42: Preview page
</gallery>
===== Word search =====
===== Word search =====
The user must choose "insert→Games→ Word Game" in order to use this component.
The user must choose "insert→Games→ Word Game" in order to use this component.
Once the Word Game page has been added to the project, the user may add the page title, instructions, and words. Each word should be added to a new line as shown in Figure 43. The look of the table is in-built will be presented as a puzzle coupled with a word list that must be searched (Figure 44)
Once the Word Game page has been added to the project, the user may add the page title, instructions, and words. Each word should be added to a new line as shown in Fig43. The look of the table is in-built will be presented as a puzzle coupled with a word list that must be searched (Fig44)
<gallery mode="packed" heights="400px">
File:Fig43 Adding the details and content to the word game.png|Fig43: Adding the details and content to the word game
File:Fig44 Preview of word game.png|Fig44: Preview of word game
</gallery>
==== Tracking tools ====
==== Tracking tools ====
The user may add a page title and select whether to display ‘Full results’, ‘Normal results’ or ‘Minimal results’ after adding a result page to the project.
The user may add a page title and select whether to display ‘Full results’, ‘Normal results’ or ‘Minimal results’ after adding a result page to the project.
The user can additionally specify that the results must be displayed in the optional properties upon the "full completion" of the project as shown in Figure 45.
The user can additionally specify that the results must be displayed in the optional properties upon the "full completion" of the project as shown in Fig45.
<gallery mode="packed" heights="400px">
File:Fig45 Selecting the results option and adding full completion.png|Fig45: Selecting the results option and adding full completion
</gallery>
=== Importing page from other project ===
=== Importing page from other project ===
User can also duplicate the whole project or elements of the project to use the same content and element in different project or to use and modify the same project as different file. To duplicate the project user should select the project from main page and click on “Duplicate” button (Figure 48).
User can import the pages or elements from one project to another project by selecting the project and clicking on the "edit project" button to reuse the content or modify and use the content. (Figs46 and 47)
<gallery mode="packed" heights="400px">
File:Fig46 Selecting import pages.png|Fig46: Selecting import pages
File:Fig47 Selecting the elements and clicking on import pages to import to current project.png|Fig47: Selecting the elements and clicking on import pages to import to current
</gallery>
=== '''Duplicating the page or element''' ===
=== Duplicating the page or element ===
In order to reuse the content and element in another project or to utilize and change the same project in a new file, the user can replicate the entire project or specific project components.
In order to reuse the content and element in another project or to utilize and change the same project in a new file, the user can replicate the entire project or specific project components.
The user must first choose the project from the home page and then click the "Duplicate" option (Figure 48).
The user must first choose the project from the home page and then click the "Duplicate" option (Fig48).
<gallery mode="packed" heights="400px">
File:Fig48 Duplicating the project.png|Fig48: Duplicating the project
</gallery>
The user should choose the project from the main page and then click "Edit Project" to duplicate an element of the project. To duplicate an element, select it and use the "Duplicate" button (Figure 49).
The user should choose the project from the main page and then click "Edit Project" to duplicate an element of the project. To duplicate an element, select it and use the "Duplicate" button (Fig49).
<gallery mode="packed" heights="400px">
File:Fig49 Duplication of element of projects.png|Fig49: Duplication of element of projects
</gallery>
=== Deleting of page or activity ===
=== Deleting of page or activity ===
The project or activity can be removed from Xerte by the user.
The project or activity can be removed from Xerte by the user.
The user must choose the project from the home page and then click the "Delete" option to remove it (Figure 50).
The user must choose the project from the home page and then click the "Delete" option to remove it (Fig50).
<gallery mode="packed" heights="400px">
File:Fig50 Deletion of project.png|Fig50: Deletion of project
</gallery>
To delete the element, the user should click on the edit button by selecting the project from the main page. The user should select the element and click on the "Delete" button (Figure 51).
To delete the element, the user should click on the edit button by selecting the project from the main page. The user should select the element and click on the "Delete" button (Fig51).
<gallery mode="packed" heights="400px">
File:Fig51 Deletion of element from project.png|Fig51: Deletion of element from project
</gallery>
=== Optional properties ===
=== Optional properties ===
Every element has a variety of ‘optional attributes’ that may be supported by the element with more choices to enhance the project. In the descriptions above, we have listed a few of the optional properties that we utilized in our project. On the right side of project (Figure 52), optional properties are displayed.
Every element has a variety of ‘optional attributes’ that may be supported by the element with more choices to enhance the project. In the descriptions above, we have listed a few of the optional properties that we utilized in our project. On the right side of project (Fig52), optional properties are displayed.
<gallery mode="packed" heights="400px">
File:Fig52 Optional properties.png|Fig52: Optional properties
</gallery>
=== Show language option and Show toolbar option ===
=== Show language option and Show toolbar option ===
The extra formatting choices of ‘Show toolbar’ and ‘Show language’ offer more feedback and button possibilities to enhance projects (Fig. 54).
The extra formatting choices of ‘Show toolbar’ and ‘Show language’ offer more feedback and button possibilities to enhance projects (Fig53).
<gallery mode="packed" heights="400px">
File:Fig53 Selecting show toolbar & show language options and the options available after selecting.png|Fig53 Selecting show toolbar & show language options and the options available after selecting
</gallery>
=== Play and publish buttons ===
=== Play and publish buttons ===
The "Play" and "Publish" buttons allow you to "preview" and "save" the project, respectively (fig. 55).
The "Play" and "Publish" buttons allow you to "preview" and "save" the project, respectively (Fig54).
<gallery mode="packed" heights="400px">
File:Fig54 Play & Publish button in project page.png|Fig54: Play & Publish button in project page
</gallery>
=== Elements of properties in interface ===
=== Elements of properties in interface ===
<gallery mode="packed" heights="400px">
File:Fig55 Properties.png|Fig55: Properties
</gallery>
'''Project'''
'''Project'''
• Editor (other user will have the controls to edit and modify the project)
• Editor (other user will have the controls to edit and modify the project)
• Read only (other user can only read or play the project)
• Read-only (other user can only read or play the project)
=== Explanation about project details ===
=== Explanation about project details ===
When you click on a specific project from the main page, project information is displayed as shown in Figure 56, and they are provided as a number Fig. 56.
When you click on a specific project from the main page, project information is displayed as shown in Fig56, and they are provided as a number Fig56.
<gallery mode="packed" heights="400px">
File:Fig55 Properties.png|Fig56: Properties
</gallery>
# Name of the project.
# Name of the project.
# User name and access control details of shared user.
# User name and access control details of shared user.
# Creators user name
# Creators user name
=== Reference ===
[https://xerte.org.uk/index.php/en/examples Template demonstrators]
[https://xot.xerte.org.uk/play.php?template_id=116 Tutorial]
[https://xot.xerte.org.uk/play.php?template_id=102#page1 Demo Video]
