Added transparent background-color to title and description fields on intro-page

css/questionset.css

@@ -65,9 +65,25 @@
   font-weight: bold;
   text-align: center;
 }
+.intro-page .title > span { 
+  padding: 0 0.2em;
+  background: rgb(255,255,255); /* Fallback for browsers not supporting rgba */
+  background: rgba(255,255,255,0.8); /* Gives WCAG contrast ratio of 5.6:1 with the current font color */
+}
 .intro-page .introduction {
   font-size: 1.25em;
   margin: 0 1em;
+  background: rgb(255,255,255); /* Fallback for browsers not supporting rgba */
+  background: rgba(255,255,255,0.8); /* Gives WCAG contrast ratio of 5.6:1 with the current font color */
+  padding: 0.2em;
+}
+/* Overrides whatever margins have been set in site-CSS, to avoid too much spacing
+   on description field, aswell as getting same padding on top and bottom of field */
+.intro-page .introduction > p {
+  margin: 0 0 0.5em 0;
+}
+.intro-page .introduction > p:last-child {
+  margin: 0;
 }
 .intro-page .buttons {
   margin: 3em auto;

js/questionset.js

@@ -39,7 +39,7 @@ H5P.QuestionSet = function (options, contentId) {
   var texttemplate =
           '<% if (introPage.showIntroPage) { %>' +
           '<div class="intro-page">' +
-          '  <div class="title"><%= introPage.title %></div>' +
+          '  <div class="title"><span><%= introPage.title %></span></div>' +
           '  <div class="introduction"><%= introPage.introduction %></div>' +
           '  <div class="buttons"><a class="qs-startbutton button"><%= introPage.startButtonText %></a></div>' +
           '</div>' +

library.json

@@ -3,7 +3,7 @@
   "contentType": "question",
   "majorVersion": 1,
   "minorVersion": 0,
-  "patchVersion": 44,
+  "patchVersion": 45,
   "runnable": 1,
   "fullscreen": 0,
   "machineName": "H5P.QuestionSet",