adapt-hotGraphicWithAudio/example.json at master · BATraining/adapt-hotGraphicWithAudio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
{
  "_id": "c-135",
  "_parentId": "b-70",
  "_classes": "",
  "_type": "component",
  "_component": "hotgraphicWithAudio",
  "_layout": "full",
  "title": "Key Facts",
  "displayTitle": "Key Facts - hotgraphicWithAudio",
  "body": "We live in a multi-device world. The growth of internet enabled devices such as smartphones, tablets and laptops means that increasingly we have to deliver learning solutions that work on all devices. This is not as simple as a desktop and mobile solution; what is required is a multi-device solution.",
  "instruction": "Click the + icons below for more.",
  "_graphic": {
    "src": "course/en/images/hotgraphic.png",
    "alt": "alt text"
  },
  "_items": [
    {
      "_top": 58,
      "_left": 23,
      "_narrativegraphic": {
          "src": "course/en/images/narrative.png",
          "alt": "narrative 1 alt text"
      },
      "strapline": "Introduction",
      "_page":[
        {
          "title": "Introduction 1-1",
          "body": "With the advent of modern browsers, frameworks, developments in HTML 5 and responsive design approaches we're now able to create engaging learning that will work, regardless of the device being used.",
          "_graphic": {
            "src": "course/en/images/html5.png",
            "alt": "Hot graphic pop-up pin. Select here to open."
          },
          "strapline": "Introduction",
          "audioSrc": "course/en/audio/hot-graphic1",
          "audioTypes": [
            {
              "type": "mp3",
              "codec": "audio/mpeg"
            }
          ]
        },
        {
          "title": "Introduction 1-2",
          "body": "In addition, Libraries such as Backbone, Underscore and Handlebars have rapidly sped up development and enabled the production of fast single page applications (SPAs) that improve the user experience.",
          "_graphic": {
            "src": "course/en/images/html5.png",
            "alt": "Hot graphic pop-up pin. Select here to open."
          },
          "strapline": "Introduction",
          "audioSrc": "course/en/audio/hot-graphic1-2",
          "audioTypes": [
            {
              "type": "mp3",
              "codec": "audio/mpeg"
            }
          ]
        }
      ]
    },
    {
      "_top": 60,
      "_left": 80,
      "_narrativegraphic": {
        "src": "course/en/images/narrative_1.png",
        "alt": "narrative 1 alt text"
      },
      "strapline": "What is responsive elearning?",
      "_page":[
        {
          "title": "What is responsive elearning? 1-1",
          "body": "Responsive elearning Design takes its inspiration from Responsive Web Design; an approach to design that ensures a single version of a website (or an elearning course created as a web app) can provide a viewing experience optimised to complement a variety of different devices, from desktop monitor to smartphone.",
          "_graphic": {
            "src": "course/en/images/devices.png",
            "alt": "Hot graphic pop-up pin. Select here to open."
          },
          "strapline": "What is responsive elearning?",
          "audioSrc": "course/en/audio/hot-graphic2-1",
          "audioTypes": [
            {
              "type": "mp3",
              "codec": "audio/mpeg"
            }
          ]
        },
        {
          "title": "What is responsive elearning? 1-2",
          "body": "This tailored viewing experience is achieved by:<ul><li>providing dynamic layouts which allow for the resizing of onscreen elements to make the most of the space available (fluid grid concept)</li><li>automatically detecting the characteristics of the device being used and applying an appropriate style to all onscreen elements (Media queries and CSS)</li><li>ensuring all images can be scaled to complement the device being used at the time</li></ul>",
          "_graphic": {
            "src": "course/en/images/devices.png",
            "alt": "Hot graphic pop-up pin. Select here to open."
          },
          "strapline": "What is responsive elearning?",
          "audioSrc": "course/en/audio/hot-graphic2-2",
          "audioTypes": [
            {
              "type": "mp3",
              "codec": "audio/mpeg"
            }
          ]
        }
      ]
    }
  ],
  "_pageLevelProgress": {
    "_isEnabled": true
  }
}