# data[].attributes.body
Please look at the task below. You are asked to create a short Blog entry - This is your homework for our next session.

# data[].attributes.body
In the following you will find the task for today's session.

# data[].attributes.headline
360° picture edit with H5P - instruction

# data[].attributes.subject
360° picture edit with H5P - instruction

# data[].attributes.body
https://h5p.org/tutorial-virtual-tour

# data[].attributes.attachment_link.readable_text
Here's the Virtual Tour (360) content we'll create in this tutorial ( drag with the mouse or use navigational arrows to explore the scene):

When to use Virtual Tour (360)

Virtual Tour (360) can be used to enrich your 360 (equirectangular) images with H5P Content. It can be used for creating virtual tours through rooms where each part of the room is explained in detail using text or images and may contain questions for the one exploring.

This tool is not limited to 360 images, you can use it also to navigate through static image scenes as well.

Step 1: Topic

We're going to make a Virtual Tour where we'll guide the viewer through the Roman Theater in Petra. Select the New content option and choose Virtual Tour (360) from the list of Content types:

The Virtual Tour (360) editor should now appear.
Add a title: "Virtual Tour Roman Theater".
The editor should look like this:

Step 2: Add a first 360 scene

We are going to add our first 360 scene now. First, we need to download a background image. This is the image we'll use in our example:

Get this image
When you open the link, click "download" in the bottom right corner and choose "Large".

To add a scene click "New scene" button. Type in the title "Scene 01 Roman Theater in Petra" and upload the background image. The scene popup should look like this:

Don't forget to add licensing info for the background image.
Click "Edit copyright" and fill in:

Title: 360 panorama from top of the Roman Theater in Petra, Jordan
Author: Sitoo
Source: https://www.flickr.com/photos/sitoo/46957108072/in/photostream/
License: Attribution-NonComercial-NoDerivs
License Version: 2.0 Generic

Edit copyright dialog should look like:

Click "Done". You've added your first scene.
The editor should now look similar to this:

The starting camera angle is set by default. If you want to change the camera angle you can move the scene by dragging it with your mouse. Once you've set the view to the starting angle you like, press the "Set starting position" button in the bottom right corner. Now your scene will always start with this camera angle.

Step 3: Add a second 360 scene

Same as with our first scene, click the "New scene" button.
This is the image we'll use for our second scene:
Get this image
When you open the link, click "download" in the bottom right corner and choose "Large". Don't forget to add licensing info for the background image.
Click "Edit copyright" and fill in:

Title: panorama_tomb_soldier
Author: Sitoo
Source: https://www.flickr.com/photos/sitoo/46284842524/
License: Attribution-NonComercial-NoDerivs
License Version: 2.0 Generic

Click "Done". You've added your second scene.

Step 4: Add a static scene

Same as when creating 360 scenes, click the "New scene" button.
Select "Static scene" instead of "360 scene".
Enter the title: "Petra, Jordan" and upload this background image:
Get this image
When you open the link, click "download" in the bottom right corner and choose "Large". Don't forget to add licensing info for the background image.
Click "Edit copyright" and fill in:
Title: Petra Theater
Author: Douglas Perkins
Source: https://www.flickr.com/photos/[email protected]/286630893/
License: Attribution
License Version: 2.0 Generic
Click "Done". You've added your third scene.

Step 5: Navigate between scenes

1st option "Go to scene" will navigate (open) the scene that the "Go to" object leads to

2nd option will edit the "Go to" object itself

3rd option will delete the "Go to" object itself

Now we have three scenes. To navigate between scenes, click the dropdown in the bottom left corner where it says "Current scene...". The Scene selector will open and you will see all of the scenes you have created so far. Here is how it looks:

We'll explain each part of a scene selector:

This icon indicates if the scene is

static or

360.

Green outline and green background

This is how we mark the currently selected scene (the one we are working on now)

"Set as starting scene" button

Click here to set this scene as the starting scene for your content. The Starting scene is the first scene end user sees.

Click this to open the scene

Click this to edit the scene ( Background, Title, Description, etc.)

Click this to delete the scene

Step 6: Connect scenes

As an author, you can navigate between scenes by using the scene selector. In order for users to move from scene to scene, you need to add some navigational elements. Navigational elements are created using the "Go to scene" tool, placed in the top menu.

Let's create some navigation. Click on the scene selector and go to our 1st scene. We want to create navigation from this scene to scene #2. Click on the "Go to scene" icon in the top menu. A dialog like this will appear:

Pick "Scene 02 Tomb Soldier" and click Done. The new navigational element will appear in the scene:

The user will use this button to go from scene #1 to scene #2. You can reposition this element by dragging it around the scene. When you click on it you'll get a context menu (like shown in the image above).

Now we want to create navigation from scene #2 to scene #1. Click on the scene selector and go to the 2nd scene.
Click on the "Go to scene" icon in the top menu, select "Scene 01 Roman Theater in Petra" and click Done.
Now we have navigation both from scene #1 to scene #2 and vice versa.

Tip: When you have created a "Go to" object you can double click on it and it will open the scene that it points to. This can save you some time!

Title: Façade of the Roman Soldier Tomb in Petra

text about the theatre

video

image of the entrance.

Author: Michael Gunther
Source: https://commons.wikimedia.org/wiki/File:Roman_Soldier_Tomb_Facade_Petra_Jordan1410.jpg
License: Attribution ShareAlike (CC-BY-SA)
License Version: 3.0 Unported

The last navigation element we want to add is from scene #1 to scene #3 (static scene). Click on the Scene selector and pick scene #1. Click on the "Go to scene" icon in the top menu, select "Petra-Jordan" and click Done. We've got one additional "Go to scene" element in our scene #1. It should look like this:

Double click on the second "Go to interaction". You will navigate to the static scene. Notice that this scene has a " Back" button in the top left corner:

A static scene has an optional "Back" button and it is checked by default when you create a static scene. This is what the option looks like:

Of course, you can turn this "Back button" off and create a "Go to scene" element yourself instead.

Step 7: Add interactions

We are going to add some interactions to our scenes now. First, we will add one image interaction to scene #2.
This is the image we will add:

Navigate to scene #2. Click on the icon in the top menu. A dialog will appear. Upload the image and add alternative text as shown here:

Don't forget to add licensing info for the image.
Click the "Metadata" button and fill in:

Click "Done". You've added your first interaction. Drag it around and position it as shown here:

Now, we will add three interactions to our static scene (scene #3):

Click on the scene selector and pick scene #3.

First, we will add the text interaction ( Source: https://en.wikipedia.org/wiki/Petra_Theater):

The theater was built in the cultural and political apex of the Nabataean kingdom under Aretas IV (9 BC-40 AD) where large scale civic construction projects in Petra and other important Nabataean trading cities in Hijaz and the Negev took place. It is said that the theater-building activities of Herod the Great may have urged the Nabataean king to follow lead. The massive theater with its large capacity was positioned to bring the greatest number of tombs within view.

Although Roman in design, being carved out opposed to being built is characteristically distinctive Nabataean style and not a Roman manner. The floral capitals of the theater are also distinctively Nabataean artistic element. Minor alterations of the theater were made by Aretas son Malichus II and later on the Romans who re-built the exterior wall.

Click on the icon in the top menu. A dialog will appear. Copy the text above and paste it into the dialog, it should look like this:

Click Done. The text interaction should show in the middle of the scene. Drag it to reposition it.

Second, we will add some video. Click on the icon in the top menu. A dialog will appear. Add the title: " Petra, Jordan - an unusual observation on the Roman theater and Nabatean tombs around it" and the source: https://www.youtube.com/watch?v=Jlexhg-9Vf8

Click Done. The video interaction should show on the scene. Drag it to reposition it.

Finally, we will add this image:

Get this image

Click on the icon in the top menu and add the image as usual. Don't forget to add licensing info for the image. Click the "Metadata" button and fill in:

Title: Façade of the Roman Soldier Tomb in Petra
Author: David Bjorgen
Source: https://en.wikipedia.org/wiki/File:Theater_Stage.jpg
License: Attribution ShareAlike (CC-BY-SA)
License Version: 2.5 Generic

Click "Done". You've added your third interaction to this scene. Drag interactions around to reposition them. You should get something like this:

Save the node/article to view your finished Virtual Tour (360).
You should now have the same result as the example on top of the page.
Feel free to leave any comments or suggestions on how to improve this tutorial.

# data[].attributes.attachment_link.description
Here's the Virtual Tour (360) content we'll create in this tutorial ( drag with the mouse or use navigational arrows to explore the scene): Virtual Tour (360) can be used to enrich your 360 (equirectangular) images with H5P Content.

# data[].attributes.body
https://www.youtube.com/watch?v=31dJFWMkTMU

# data[].attributes.body
Shawn is an exchange student from the UK in your class. He's writing a blog about his year in Germany. Write his blog entry about his first day in your school. Write about 120 words.

# data[].attributes.body
1.  Choose two or three 360° pictures of your liking and imagine you are in..

…the restaurant

…the theatre

…the city

2. Write speech bubbles for the people in these pictures you have chosen and link the pictures to each other. What do you see in them? Which historical monuments can you see? Make references to those or culture-specific subjects (like food, cars, busses, cabs).
Use the H5P software to do so.
Create a short Quiz for your 360° degree sequence and share it with your co-students as well. You can find instructions for creating quizzes as well

3. Share your results in this padlet (link to your moodle project) and look at the results of the group next to yours.

# data[].attributes.headline
Instructions for the Introduction to H5P

# data[].attributes.subject
Instructions for the Introduction to H5P