Risk Literacy/Real World Labs/web-based Exploration

From Wikiversity
Jump to navigation Jump to search
Markers for two cities on the map with discription and links in marker popup.
Dr Johnson - Dictionary writerBoswell - BiographerSir Joshua Reynolds - HostDavid Garrick - actorEdmund Burke - statesmanPasqual Paoli - Corsican patriotCharles Burney - music historianThomas Warton - poet laureateOliver Goldsmith - writerprob.The Infant Academy 1782unknown paintingAn unknown portraitservant - poss. Francis BarberUse button to enlarge or use hyperlinks
Image map example of The Club. Clicking on a person in the picture causes the browser to load the appropriate article.


Water Wheel Link to Wikipedia
Click on Water Wheel - Image River: Queich, City: Annweiler, Country: Germany
ImageMap Editor HTML5 - runs in Browser - no uploads
AR.js Example with Kanji Marker with Water Molecule as 3D object for web-based exploration of 3D objects in a browser

With this learning resource you will be able to create web-based exploration platform for a Real World Lab. This approach combines a

  • geographical map to show were the Real World Lab is located and
  • image map that add clickable areas on an image with other web content and
  • VR environments in AFrame for web-based exploration even with a VR headset.

This approach can replace the augmented reality approach with Mixare or AR.js that provides augmented reality in the browser.

Learning Tasks[edit | edit source]

360o Panorama and VR environments[edit | edit source]

Explore a option virtual reality environment which can be explored with a browser, VR headset or mobile device with e.g. Card Board.

Explain the options to improve risk literacy with a 3D environment and visualized invisible risks with exposure of users to risky situations physically. Design the VR environment as an exploratory learning resource with ToDos for the user (see also gamification and serious games).

Geographical Maps[edit | edit source]

  • (Learner's Geolocation on Map) Learn about geolocation aware browser applications by checking the OpenLayers Example for Geolocation and press of the button "track position". This retrieve the geolocation of GPS or estimates geolocation by IP-address of browser.
  • (Create your first web-based Map) Learn to create your first map on your computer.
    • Install an OpenSource Editor Copy and Paste the code below the OpenLayers Example into the Atom-Editor and save the file. Browse your local file in your Webbrowser (e.g. Firefox, Chromium, Chrome, ...)
    • Center the map over your Real World Map and select an appropriate zoom factor for your map in OpenLayers

Image Map[edit | edit source]

  • Select images for your Real World Lab (e.g. the image on the right with the river Queich) and create an image map that informs about the objects seen on the image (e.g. the water wheel or the river). The ImageMap editor will defined clickable areas on the image. Users explore the Real World Lab just by the web browser by selecting the river bed, or a building. By clicking on the river or the building the user can select further details of river or the building (view inside the building).
https://upload.wikimedia.org/wikipedia/commons/5/5e/Annweiler_Queich_05.JPG
  • Mark the water wheel and create a reference to an online resource in Wikipedia, that explains this type of old technology.
  • Try other types of links that make a reference objects see on the image, e.g. a geographical map with a marker, that shows where the image was taken, or any other web-based resouce including quizzes, YouTube Videos, ...

3D Panorama Videos[edit | edit source]

The OpenSource Library Valiant360[3] is a 360 degree panoramic video player.

  • Look around (drag view) in top video on Valiant360 Website on GitHub
  • As video source you need an equirectangular video (see example on Youtube[4])
  • Exxplore an artifical 3D world with and panorama video (see also 3D Modelling)
  • Explore Hardware Setup with 4 Cameras and explain why you need 4 cameras and an overlap of camera images!
  • Explain the decomposition of video into single frame (e.g. 25 frames per second) and how a single webbased 360o Image[5] to explore the environment!
  • Explore the device sensors of mobile device. Explain how these sensors can be used look around in a 3D video just by turning and moving the device.
  • Explain how a geolocation at a mobile device can be used to add 360o to place yourself in 360o video refers to the current geolocation your are currently. View a flood event from previous years, so that the learner will be able to understand, what the impact will be for the current geolocation of the Real World Lab and learn and do something to make place a bit save (see Risk Awareness and Response to the perceived risk)

Integration of Approaches[edit | edit source]

The following learning task we will integrate digital maps with OpenLayers with Markers with 3D scenes in Aframe. Furthermore with will link an image map with wikipedia article for further information about the displayed people or objects in the images.

  1. (OpenLayers Map ) Create an OpenLayers Map with Markers4Map[6] that contain markers for a certain geolocation.
  1. (360o Image -Panorama) Create a webbased Image for that geolocation on Github with AFrame. Link in Wikiversity Source of this article is generated with Markers4Map by pressing the Display-Map-Button and copy the link in the browser URL.
  2. (Image Map) Create ImageMap with and image of the geolocation on the map and reference objects on the image to corresponding Wikipedia or Wikiversity articles that explain the purpose or background of the object.

See also[edit | edit source]

Tools[edit | edit source]

Links[edit | edit source]

References[edit | edit source]

  1. Allen, R. (1998). The Web: interactive and multimedia education. Computer Networks and ISDN Systems, 30(16), 1717-1727.
  2. ImgMap - Webbased OpenSource Tool for creating ImageMap for Wikiversity (accessed 2017/10/24) - https://niebert.github.io/imgmap - Download; https://www.github.com/niebert/imgmap (Offline use of ImageMap Editor)
  3. Valiant360 Github Repository of 360 degree panoramic video player (accessed 2017/09/12) - https://flimshaw.github.io/Valiant360/
  4. Example of Equirectangular Video on Youtube by (accessed 2017/10/19) - https://www.youtube.com/watch?v=US6IZ2vuLVk
  5. Doyle, S., Dodge, M., & Smith, A. (1998). The potential of web-based mapping and virtual reality technologies for modelling urban environments. Computers, Environment and Urban Systems, 22(2), 137-155.
  6. Markers4Map - Webbased HTML5 OpenSource tool with Browser storage of JSON file by application of LocalStorage (2017) - accessed 2017/10/24 - https://niebert.github.io/Markers4Map - Source Code Github: https://www.github.com/niebert/Markers4Map