{"semantics":[{"name":"presentation","type":"group","importance":"high","widget":"coursepresentation","fields":[{"name":"slides","importance":"high","type":"list","field":{"name":"slide","importance":"high","type":"group","fields":[{"name":"elements","importance":"high","type":"list","field":{"name":"element","importance":"high","type":"group","fields":[{"name":"x","importance":"low","type":"number","widget":"none"},{"name":"y","importance":"low","type":"number","widget":"none"},{"name":"width","importance":"low","type":"number","widget":"none","optional":true},{"name":"height","importance":"low","type":"number","widget":"none","optional":true},{"name":"action","type":"library","importance":"high","options":["H5P.AdvancedText 1.1","H5P.Link 1.3","H5P.Image 1.0","H5P.Video 1.3","H5P.Audio 1.2","H5P.Blanks 1.8","H5P.SingleChoiceSet 1.9","H5P.MultiChoice 1.10","H5P.TrueFalse 1.2","H5P.DragQuestion 1.11","H5P.Summary 1.8","H5P.DragText 1.6","H5P.MarkTheWords 1.7","H5P.Dialogcards 1.6","H5P.ContinuousText 1.2","H5P.ExportableTextArea 1.2","H5P.Table 1.1","H5P.InteractiveVideo 1.17","H5P.TwitterUserFeed 1.0"],"optional":true},{"name":"solution","type":"text","widget":"html","optional":true,"label":"Comments","importance":"low","description":"The comments are shown when the user displays the suggested answers for all slides.","enterMode":"p","tags":["strong","em","del","a","ul","ol","h2","h3","hr"]},{"name":"alwaysDisplayComments","type":"boolean","label":"Always display comments","importance":"low","optional":true},{"name":"backgroundOpacity","type":"number","label":"Background Opacity","importance":"low","min":0,"max":100,"step":5,"default":0,"optional":true},{"name":"displayAsButton","type":"boolean","label":"Display as button","importance":"medium","default":false,"optional":true},{"name":"buttonSize","type":"select","label":"Button size","importance":"low","optional":false,"default":"big","options":[{"value":"small","label":"Small"},{"value":"big","label":"Big"}]},{"name":"title","type":"text","optional":true,"label":"Title","importance":"medium"},{"name":"goToSlideType","type":"select","label":"Go to","importance":"medium","optional":false,"options":[{"value":"specified","label":"Specific slide number"},{"value":"next","label":"Next slide"},{"value":"previous","label":"Previous slide"}],"default":"specified"},{"name":"goToSlide","type":"number","label":"Specific slide number","description":"Only applicable when 'Specific slide number' is selected","importance":"low","min":1,"optional":true},{"name":"invisible","type":"boolean","label":"Invisible","importance":"low","description":"Default cursor, no title and no tab index. Warning: Users with disabilities or keyboard only users will have trouble using this element.","default":false},{"name":"metadata","type":"group","label":"Metadata","importance":"low","optional":true,"deprecated":true,"fields":[{"name":"title","type":"text","optional":true,"label":"Title"},{"name":"author","type":"text","optional":true,"label":"Author"},{"name":"lisence","type":"text","optional":true,"label":"License"}]}]}},{"name":"keywords","importance":"low","type":"list","optional":true,"field":{"name":"keyword","importance":"low","type":"group","optional":true,"fields":[{"name":"main","importance":"low","type":"text","optional":true},{"name":"subs","importance":"low","type":"list","optional":true,"field":{"name":"keyword","importance":"low","type":"text"}}]}},{"name":"slideBackgroundSelector","importance":"medium","type":"group","widget":"radioSelector","fields":[{"name":"imageSlideBackground","type":"image","label":"Image","importance":"medium","optional":true,"description":"Image background should have a 2:1 width to height ratio to avoid stretching. High resolution images will display better on larger screens."},{"name":"fillSlideBackground","importance":"medium","type":"text","widget":"colorSelector","label":"Pick a color","spectrum":{"flat":true,"showInput":true,"allowEmpty":true,"showButtons":false},"default":null,"optional":true}]}]}},{"name":"ct","importance":"low","type":"text","widget":"none","optional":true,"tags":["strong","em","del","br","p","a","h2","h3"]},{"name":"keywordListEnabled","type":"boolean","label":"Keyword list","importance":"low","default":true},{"name":"keywordListAlwaysShow","type":"boolean","label":"Always show","importance":"low","default":false},{"name":"keywordListAutoHide","type":"boolean","label":"Auto hide","importance":"low","default":false},{"name":"keywordListOpacity","type":"number","label":"Opacity","importance":"low","min":0,"max":100,"default":90},{"name":"globalBackgroundSelector","importance":"medium","type":"group","widget":"radioSelector","fields":[{"name":"imageGlobalBackground","type":"image","label":"Image","importance":"medium","optional":true,"description":"Image background should have a 2:1 width to height ratio to avoid stretching. High resolution images will display better on larger screens."},{"name":"fillGlobalBackground","type":"text","widget":"colorSelector","label":"Pick a color","importance":"medium","spectrum":{"flat":true,"showInput":true,"allowEmpty":true,"showButtons":false},"default":null,"optional":true}]}]},{"name":"l10n","type":"group","label":"Localize","importance":"low","common":true,"fields":[{"name":"slide","type":"text","label":"Translation for \"Slide\"","importance":"low","default":"Slide"},{"name":"yourScore","type":"text","label":"Translation for \"Your Score\"","importance":"low","default":"Your Score"},{"name":"maxScore","type":"text","label":"Translation for \"Max Score\"","importance":"low","default":"Max Score"},{"name":"goodScore","type":"text","label":"Greeting given for GOOD score","importance":"low","default":"Congratulations! You got @percent correct!","description":"@percent is replaced by the real user score in percent"},{"name":"okScore","type":"text","label":"Greeting given for OK score","importance":"low","default":"Nice effort! You got @percent correct!","description":"@percent is replaced by the real user score in percent"},{"name":"badScore","type":"text","label":"Greeting given for BAD score","importance":"low","default":"You got @percent correct.","description":"@percent is replaced by the real user score in percent"},{"name":"total","type":"text","label":"Translation for \"Total\"","importance":"low","default":"TOTAL"},{"name":"showSolutions","type":"text","label":"Title for show solutions button","importance":"low","default":"Show solutions"},{"name":"retry","type":"text","label":"Text for the retry button","importance":"low","default":"Retry","optional":true},{"name":"title","type":"text","label":"Translation for \"Title\"","importance":"low","default":"Title"},{"name":"author","type":"text","label":"Translation for \"Author\/supplier\"","importance":"low","default":"Author"},{"name":"lisence","type":"text","label":"Translation for \"License\"","importance":"low","default":"License","deprecated":true,"optional":true},{"name":"license","type":"text","label":"Translation for \"License\"","importance":"low","default":"License"},{"name":"exportAnswers","type":"text","label":"Text for the export text button","importance":"low","default":"Export text"},{"name":"copyright","type":"text","label":"Text for the \"Rights of use\" button","importance":"low","default":"Rights of use"},{"name":"hideKeywords","type":"text","label":"Hide keywords list button title","importance":"low","default":"Hide keywords list"},{"name":"showKeywords","type":"text","label":"Show keywords list button title","importance":"low","default":"Show keywords list"},{"name":"fullscreen","type":"text","label":"Fullscreen label","importance":"low","default":"Fullscreen"},{"name":"exitFullscreen","type":"text","label":"Exit fullscreen label","importance":"low","default":"Exit fullscreen"},{"name":"prevSlide","type":"text","label":"Previous slide label","importance":"low","default":"Previous slide"},{"name":"nextSlide","type":"text","label":"Next slide label","importance":"low","default":"Next slide"},{"name":"currentSlide","type":"text","label":"Current slide label","importance":"low","default":"Current slide"},{"name":"lastSlide","type":"text","label":"Last slide label","importance":"low","default":"Last slide"},{"name":"solutionModeTitle","type":"text","label":"Exit solution mode text","importance":"low","default":"Exit solution mode"},{"name":"solutionModeText","type":"text","label":"Solution mode text","importance":"low","default":"Solution Mode"},{"name":"summaryMultipleTaskText","type":"text","label":"Text when multiple tasks on a page","importance":"low","default":"Multiple tasks"},{"name":"scoreMessage","type":"text","label":"Score message text","importance":"low","default":"You achieved:"},{"name":"shareFacebook","type":"text","label":"Share to Facebook text","importance":"low","default":"Share on Facebook"},{"name":"shareTwitter","type":"text","label":"Share to Twitter text","importance":"low","default":"Share on Twitter"},{"name":"shareGoogle","type":"text","label":"Share to Google text","importance":"low","default":"Share on Google+"},{"name":"summary","type":"text","label":"Title for summary slide","importance":"low","default":"Summary"},{"name":"solutionsButtonTitle","type":"text","label":"Title for the comments icon","importance":"low","default":"Show comments"},{"name":"printTitle","type":"text","label":"Title for print button","importance":"low","default":"Print"},{"name":"printIngress","type":"text","label":"Print dialog ingress","importance":"low","default":"How would you like to print this presentation?"},{"name":"printAllSlides","type":"text","label":"Label for \"Print all slides\" button","importance":"low","default":"Print all slides"},{"name":"printCurrentSlide","type":"text","label":"Label for \"Print current slide\" button","importance":"low","default":"Print current slide"},{"name":"noTitle","type":"text","label":"Label for slides without a title","importance":"low","default":"No title"},{"name":"accessibilitySlideNavigationExplanation","type":"text","label":"Explanation of slide navigation for assistive technologies","importance":"low","default":"Use left and right arrow to change slide in that direction whenever canvas is selected."},{"name":"accessibilityCanvasLabel","type":"text","label":"Canvas label for assistive technologies","importance":"low","default":"Presentation canvas. Use left and right arrow to move between slides."},{"name":"containsNotCompleted","type":"text","label":"Label for uncompleted interactions","importance":"low","default":"@slideName contains not completed interaction"},{"name":"containsCompleted","type":"text","label":"Label for completed interactions","importance":"low","default":"@slideName contains completed interaction"},{"name":"slideCount","type":"text","label":"Label for slide counter. Variables are @index, @total","importance":"low","default":"Slide @index of @total"},{"name":"containsOnlyCorrect","type":"text","label":"Label for slides that only contains correct answers","importance":"low","default":"@slideName only has correct answers"},{"name":"containsIncorrectAnswers","type":"text","label":"Label for slides that has incorrect answers","importance":"low","default":"@slideName has incorrect answers"}]},{"name":"override","type":"group","label":"Behaviour settings.","importance":"low","description":"These options will let you override behaviour settings.","optional":true,"fields":[{"name":"activeSurface","type":"boolean","widget":"disposableBoolean","label":"Activate Active Surface Mode","importance":"low","description":"Removes navigation controls for the end user. Use Go To Slide to navigate.","default":false},{"name":"hideSummarySlide","type":"boolean","label":"Hide Summary Slide","importance":"low","description":"Hides the summary slide.","default":false},{"name":"showSolutionButton","type":"select","label":"Override \"Show Solution\" button","importance":"low","description":"This option determines if the \"Show Solution\" button will be shown for all questions, disabled for all or configured for each question individually.","optional":true,"options":[{"value":"on","label":"Enabled"},{"value":"off","label":"Disabled"}]},{"name":"retryButton","type":"select","label":"Override \"Retry\" button","importance":"low","description":"This option determines if the \"Retry\" button will be shown for all questions, disabled for all or configured for each question individually.","optional":true,"options":[{"value":"on","label":"Enabled"},{"value":"off","label":"Disabled"}]},{"name":"enablePrintButton","type":"boolean","label":"Enable print button","importance":"low","description":"Enables the print button.","default":false},{"name":"social","type":"group","label":"Social Settings","widget":"showWhen","showWhen":{"rules":[{"field":"hideSummarySlide","equals":false}]},"importance":"low","description":"These options will let you override social behaviour settings. Empty values will be filled in automatically if a link is provided, otherwise all values will be generated.","optional":true,"fields":[{"name":"showFacebookShare","type":"boolean","label":"Display Facebook share icon","importance":"low","default":true},{"name":"facebookShare","importance":"low","type":"group","expanded":true,"label":"Facebook share settings","widget":"showWhen","showWhen":{"rules":[{"field":"showFacebookShare","equals":true}]},"fields":[{"name":"url","type":"text","label":"Share to Facebook link","importance":"low","default":"@currentpageurl"},{"name":"quote","type":"text","label":"Share to Facebook quote","importance":"low","default":"I scored @percentage on a task at @currentpageurl."}]},{"name":"showTwitterShare","type":"boolean","label":"Display Twitter share icon","importance":"low","default":false},{"name":"twitterShare","importance":"low","type":"group","expanded":true,"label":"Twitter share settings","widget":"showWhen","showWhen":{"rules":[{"field":"showTwitterShare","equals":true}]},"fields":[{"name":"statement","type":"text","label":"Share to Twitter statement","importance":"low","default":"I scored @percentage on a task at @currentpageurl."},{"name":"url","type":"text","label":"Share to Twitter link","importance":"low","default":"@currentpageurl"},{"name":"hashtags","type":"text","label":"Share to Twitter hashtags","importance":"low","default":"h5p, course"}]},{"name":"showGoogleShare","type":"boolean","label":"Display Google+ share icon","importance":"low","default":false},{"name":"googleShareUrl","type":"text","label":"Share to Google link","importance":"low","default":"@currentpageurl","widget":"showWhen","showWhen":{"rules":[{"field":"showGoogleShare","equals":true}]}}]}]}],"language":"{\n \"semantics\": [\n {\n \"fields\": [\n {\n \"field\": {\n \"fields\": [\n {\n \"field\": {\n \"fields\": [\n {},\n {},\n {},\n {},\n {},\n {\n \"label\": \"Opmerkingen\",\n \"description\": \"De opmerkingen worden getoond wanneer de gebruiker de voorgestelde antwoorden voor alle slides toont.\"\n },\n {\n \"label\": \"Altijd opmerkingen tonen\"\n },\n {\n \"label\": \"Ondoorzichtigheid achtergrond\"\n },\n {\n \"label\": \"Tonen als knop\"\n },\n {\n \"label\": \"Button size\",\n \"options\": [\n {\n \"label\": \"Small\"\n },\n {\n \"label\": \"Big\"\n }\n ]\n },\n {\n \"label\": \"Titel\"\n },\n {\n \"label\": \"Go to to\",\n \"options\": [\n {\n \"label\": \"Specific slide number\"\n },\n {\n \"label\": \"Volgende slide\"\n },\n {\n \"label\": \"Vorige slide\"\n }\n ]\n },\n {\n \"label\": \"Ga naar slide\",\n \"description\": \"Only applicable when 'Specific slide number' is selected\"\n },\n {\n \"label\": \"Onzichtbaar\",\n \"description\": \"Standaard cursor, geen titel en geen tab index. Let op: gebruikers met een beperking of gebruikers die alleen een toetsenbord gebruiken, zullen problemen ervaren met dit element.\"\n },\n {\n \"label\": \"Metadata\",\n \"fields\": [\n {\n \"label\": \"Titel\"\n },\n {\n \"label\": \"Auteur\/Leverancier\"\n },\n {\n \"label\": \"Licentie\"\n }\n ]\n }\n ]\n }\n },\n {},\n {\n \"fields\": [\n {\n \"label\": \"Afbeelding\",\n \"description\": \"Achtergrondafbeelding moet een ratio van 2:1 breedte:hoogte hebben om te voorkomen dat deze wordt uitgerekt. Afbeeldingen met hoge resolutie worden beter getoond op grotere schermen.\"\n },\n {\n \"label\": \"Kies een kleur\",\n \"default\": \"\"\n }\n ]\n }\n ]\n }\n },\n {},\n {\n \"label\": \"Lijst met sleutelwoorden\"\n },\n {\n \"label\": \"Altijd tonen\"\n },\n {\n \"label\": \"Automatisch verbergen\"\n },\n {\n \"label\": \"Ondoorzichtigheid\"\n },\n {\n \"fields\": [\n {\n \"label\": \"Afbeelding\",\n \"description\": \"Achtergrondafbeelding moet een ratio van 2:1 breedte:hoogte hebben om te voorkomen dat deze wordt uitgerekt. Afbeeldingen met hoge resolutie worden beter getoond op grotere schermen.\"\n },\n {\n \"label\": \"Kies een kleur\",\n \"default\": \"\"\n }\n ]\n }\n ]\n },\n {\n \"label\": \"Localiseren\",\n \"fields\": [\n {\n \"label\": \"Vertaling voor \\\"Slide\\\"\",\n \"default\": \"Slide\"\n },\n {\n \"label\": \"Vertaling voor \\\"Jouw score\\\"\",\n \"default\": \"Jouw score\"\n },\n {\n \"label\": \"Vertaling voor \\\"Maximale score\\\"\",\n \"default\": \"Max score\"\n },\n {\n \"label\": \"Melding voor een GOEDE score\",\n \"default\": \"Gefeliciteerd! Je hebt @percent correct!\",\n \"description\": \"@percent wordt vervangen door de werkelijke score van de gebruiker, in procenten\"\n },\n {\n \"label\": \"Melding voor een REDELIJKE score\",\n \"default\": \" Goed gedaan! Je hebt @percent correct!\",\n \"description\": \"@percent wordt vervangen door de werkelijke score van de gebruiker, in procenten\"\n },\n {\n \"label\": \"Melding voor een SLECHTE score\",\n \"default\": \"Je hebt @percent correct.\",\n \"description\": \"@percent wordt vervangen door de werkelijke score van de gebruiker, in procenten\"\n },\n {\n \"label\": \"Vertaling voor \\\"Totaal\\\"\",\n \"default\": \"Totaal\"\n },\n {\n \"label\": \"Tekst voor \\\"Toon oplossing\\\"-knop\",\n \"default\": \"Toon oplossing\"\n },\n {\n \"label\": \"Tekst voor de knop Opnieuw\",\n \"default\": \"Opnieuw proberen\"\n },\n {\n \"label\": \"Vertaling voor \\\"Titel\\\"\",\n \"default\": \"Titel\"\n },\n {\n \"label\": \"Vertaling voor \\\"Auteur\/Leverancier\\\"\",\n \"default\": \"Auteur\"\n },\n {\n \"label\": \"Vertaling voor \\\"Licentie\\\"\",\n \"default\": \"Licentie\"\n },\n {\n \"label\": \"Vertaling voor \\\"Licentie\\\"\",\n \"default\": \"Licentie\"\n },\n {\n \"label\": \"Vertaling voor \\\"Exporteer tekst\\\"\",\n \"default\": \"Exporteer tekst\"\n },\n {\n \"label\": \"Tekst voor Gebruiksrechten-knop\",\n \"default\": \"Gebruiksrechten\"\n },\n {\n \"label\": \"Titel voor \\\"Verberg sleutelwoordenlijst\\\"-knop\",\n \"default\": \"Verberg sleutelwoordenlijst\"\n },\n {\n \"label\": \"Titel voor \\\"Toon sleutelwoordenlijst\\\"-knop\",\n \"default\": \"Toon sleutelwoordenlijst\"\n },\n {\n \"label\": \"Titel voor \\\"Volledig scherm\\\"-knop\",\n \"default\": \"Volledig scherm\"\n },\n {\n \"label\": \"Titel voor \\\"Volledig scherm afsluiten\\\"-knop\",\n \"default\": \"Volledig scherm afsluiten\"\n },\n {\n \"label\": \"Titel voor \\\"Vorige slide\\\"-knop\",\n \"default\": \"Vorige slide\"\n },\n {\n \"label\": \"Titel voor \\\"Volgende slide\\\"-knop\",\n \"default\": \"Volgende slide\"\n },\n {\n \"label\": \"Titel voor \\\"Huidige slide\\\"-knop\",\n \"default\": \"Huidige slide\"\n },\n {\n \"label\": \"Titel voor \\\"Laatste slide\\\"-knop\",\n \"default\": \"Laatste slide\"\n },\n {\n \"label\": \"Titel voor \\\"Oplossingsmodus afsluiten\\\"-knop\",\n \"default\": \"Oplossingsmodus afsluiten\"\n },\n {\n \"label\": \"Tekst oplossingsmodus\",\n \"default\": \"Oplossingsmodus\"\n },\n {\n \"label\": \"Tekst wanneer er meerdere taken op een pagina zijn\",\n \"default\": \"Meerdere taken\"\n },\n {\n \"label\": \"Scoretekst\",\n \"default\": \"Je hebt gescoord:\"\n },\n {\n \"label\": \"Deel op Facebook tekst\",\n \"default\": \"Deel op Facebook\"\n },\n {\n \"label\": \"Deel op Twitter tekst\",\n \"default\": \"Deel op Twitter\"\n },\n {\n \"label\": \"Share to Google text\",\n \"default\": \"Share on Google+\"\n },\n {\n \"label\": \"Titel voor \\\"Samenvatting\\\" slide\",\n \"default\": \"Samenvatting\"\n },\n {\n \"label\": \"Titel voor opmerkingenicoon\",\n \"default\": \"Toon opmerkingen\"\n },\n {\n \"label\": \"Titel voor \\\"Afdrukken\\\"-knop\",\n \"default\": \"Afdrukken\"\n },\n {\n \"label\": \"Afdrukken dialoog ingress\",\n \"default\": \"Hoe wil je deze presentatie afdrukken?\"\n },\n {\n \"label\": \"Titel voor \\\"Druk alle slides af\\\"-knop\",\n \"default\": \"Druk alle slides af\"\n },\n {\n \"label\": \"Titel voor \\\"Druk huidige slide af\\\"-knop\",\n \"default\": \"Druk huidige slide af\"\n },\n {\n \"label\": \"Label for slides without a title\",\n \"default\": \"No title\"\n },\n {\n \"label\": \"Explanation of slide navigation for assistive technologies\",\n \"default\": \"Use left and right arrow to change slide in that direction whenever canvas is selected\"\n },\n {\n \"label\": \"Canvas label for assistive technologies\",\n \"default\": \"Presentation canvas. Use left and right arrow to move between slides.\"\n },\n {\n \"label\": \"Label for uncompleted interactions\",\n \"default\": \"@slideName contains not completed interaction\"\n },\n {\n \"label\": \"Label for completed interactions\",\n \"default\": \"@slideName contains completed interaction\"\n },\n {\n \"label\": \"Label for slide counter. Variables are @index, @total\",\n \"default\": \"Slide @index of @total\"\n },\n {\n \"label\": \"Label for slides that only contains correct answers\",\n \"default\": \"@slideName only has correct answers\"\n },\n {\n \"label\": \"Label for slides that has incorrect answers\",\n \"default\": \"@slideName has incorrect answers\"\n }\n ]\n },\n {\n \"label\": \"Gedragsinstellingen\",\n \"description\": \"Met deze opties kun je de gedragsinstellingen overschrijven.\",\n \"fields\": [\n {\n \"label\": \"Activeer Active Surface Mode\",\n \"description\": \"Verwijdert navigatieregelaars voor de eindgebruiker. Gebruik 'Ga naar Slide' om te navigeren.\"\n },\n {\n \"label\": \"Verberg samenvatting\",\n \"description\": \"Verbergt de samenvattingsslide.\"\n },\n {\n \"label\": \"\\\"Toon oplossing\\\" knop instellen\",\n \"description\": \"Deze optie bepaalt of de \\\"Toon oplossing\\\" knop voor alle vragen wordt getoond, uitgeschakeld of voor iedere vraag afzonderlijk wordt geconfigureerd.\",\n \"options\": [\n {\n \"label\": \"Ingeschakeld\"\n },\n {\n \"label\": \"Uitgeschakeld\"\n }\n ]\n },\n {\n \"label\": \"\\\"Opnieuw proberen\\\" knop instellen\",\n \"description\": \"Deze optie bepaalt of de \\\"Opnieuw proberen\\\" knop voor alle vragen wordt getoond, uitgeschakeld of voor iedere vraag afzonderlijk wordt geconfigureerd.\",\n \"options\": [\n {\n \"label\": \"Ingeschakeld\"\n },\n {\n \"label\": \"Uitgeschakeld\"\n }\n ]\n },\n {\n \"label\": \"Printknop inschakelen\",\n \"description\": \"Schakelt printknop in\"\n },\n {\n \"label\": \"Social Settings\",\n \"description\": \"These options will let you override social behaviour settings. Empty values will be filled in automatically if a link is provided, otherwise all values will be generated.\",\n \"fields\": [\n {\n \"label\": \"Display Facebook share icon\"\n },\n {\n \"label\": \"Facebook share settings\",\n \"fields\": [\n {\n \"label\": \"Share to Facebook link\",\n \"default\": \"@currentpageurl\"\n },\n {\n \"label\": \"Share to Facebook quote\",\n \"default\": \"I scored @percentage on a task at @currentpageurl.\"\n }\n ]\n },\n {\n \"label\": \"Display Twitter share icon\"\n },\n {\n \"label\": \"Twitter share settings\",\n \"fields\": [\n {\n \"label\": \"Share to Twitter statement\",\n \"default\": \"I scored @percentage on a task at @currentpageurl.\"\n },\n {\n \"label\": \"Share to Twitter link\",\n \"default\": \"@currentpageurl\"\n },\n {\n \"label\": \"Share to Twitter hashtags\",\n \"default\": \"h5p, course\"\n }\n ]\n },\n {\n \"label\": \"Display Google+ share icon\"\n },\n {\n \"label\": \"Share to Google link\",\n \"default\": \"@currentpageurl\"\n }\n ]\n }\n ]\n }\n ]\n}","javascript":{"https:\/\/opleiden.syntra-ab.be\/moodle\/pluginfile.php\/1\/mod_hvp\/libraries\/H5P.DragNDrop-1.1\/drag-n-drop.js?ver=1.1.5":"\nvar H5P = H5P || {};\n\n\/**\n * A class that easily helps your create awesome drag and drop.\n *\n * @param {H5P.DragNBar} DnB\n * @param {jQuery} $container\n * @returns {undefined}\n *\/\nH5P.DragNDrop = function (dnb, $container) {\n H5P.EventDispatcher.call(this);\n this.dnb = dnb;\n this.$container = $container;\n this.scrollLeft = 0;\n this.scrollTop = 0;\n};\n\n\/\/ Inherit support for events\nH5P.DragNDrop.prototype = Object.create(H5P.EventDispatcher.prototype);\nH5P.DragNDrop.prototype.constructor = H5P.DragNDrop;\n\n\/**\n * Set the current element\n * \n * @method setElement\n * @param {j@uery} $element\n *\/\nH5P.DragNDrop.prototype.setElement = function ($element) {\n this.$element = $element;\n};\n\n\/**\n * Start tracking the mouse.\n *\n * @param {jQuery} $element\n * @param {Number} x Start X coordinate\n * @param {Number} y Start Y coordinate\n * @returns {undefined}\n *\/\nH5P.DragNDrop.prototype.press = function ($element, x, y) {\n var that = this;\n var eventData = {\n instance: this\n };\n\n H5P.$window\n .mousemove(eventData, H5P.DragNDrop.moveHandler)\n .bind('mouseup', eventData, H5P.DragNDrop.release);\n\n H5P.$body\n \/\/ With user-select: none uncommented, after moving a drag and drop element, if I hover over something that changes transparancy on hover IE10 on WIN7 crashes\n \/\/ TODO: Add user-select and -ms-user-select later if IE10 stops bugging\n .css({'-moz-user-select': 'none', '-webkit-user-select': 'none'\/*, 'user-select': 'none', '-ms-user-select': 'none'*\/})\n .attr('unselectable', 'on')[0]\n .onselectstart = H5P.$body[0].ondragstart = function () {\n return false;\n };\n\n that.containerOffset = $element.offsetParent().offset();\n\n this.$element = $element;\n this.moving = false;\n this.startX = x;\n this.startY = y;\n\n this.marginX = parseInt($element.css('marginLeft')) + parseInt($element.css('marginRight'));\n this.marginY = parseInt($element.css('marginTop')) + parseInt($element.css('marginBottom'));\n\n var offset = $element.offset();\n this.adjust = {\n x: x - offset.left + this.marginX,\n y: y - offset.top - this.marginY\n };\n\n if (that.dnb && that.dnb.newElement) {\n this.move(x, y);\n }\n};\n\n\/**\n * Handles mouse move events.\n *\n * @param {Event} event\n *\/\nH5P.DragNDrop.moveHandler = function (event) {\n event.stopPropagation();\n event.data.instance.move(event.pageX, event.pageY);\n};\n\n\/**\n * Handles mouse movements.\n *\n * @param {number} x\n * @param {number} y\n *\/\nH5P.DragNDrop.prototype.move = function (x, y) {\n var that = this;\n\n if (!that.moving) {\n if (that.startMovingCallback !== undefined && !that.startMovingCallback(x, y)) {\n return;\n }\n\n \/\/ Start moving\n that.moving = true;\n that.$element.addClass('h5p-moving');\n }\n\n x -= that.adjust.x;\n y -= that.adjust.y;\n\n var posX = x - that.containerOffset.left + that.scrollLeft;\n var posY = y - that.containerOffset.top + that.scrollTop;\n\n if (that.snap !== undefined) {\n posX = Math.round(posX \/ that.snap) * that.snap;\n posY = Math.round(posY \/ that.snap) * that.snap;\n }\n\n \/\/ Do not move outside of minimum values.\n if (that.min !== undefined) {\n if (posX < that.min.x) {\n posX = that.min.x;\n x = that.min.x + that.containerOffset.left - that.scrollLeft;\n }\n if (posY < that.min.y) {\n posY = that.min.y;\n y = that.min.y + that.containerOffset.top - that.scrollTop;\n }\n }\n\n\n if (that.dnb && that.dnb.newElement && posY >= 0) {\n that.min.y = 0;\n }\n\n \/\/ Do not move outside of maximum values.\n if (that.max !== undefined) {\n if (posX > that.max.x) {\n posX = that.max.x;\n x = that.max.x + that.containerOffset.left - that.scrollLeft;\n }\n if (posY > that.max.y) {\n posY = that.max.y;\n y = that.max.y + that.containerOffset.top - that.scrollTop;\n }\n }\n\n \/\/ Show transform panel if element has moved\n var startX = that.startX - that.adjust.x - that.containerOffset.left + that.scrollLeft;\n var startY = that.startY - that.adjust.y - that.containerOffset.top + that.scrollTop;\n if (!that.snap && (posX !== startX || posY !== startY)) {\n that.trigger('showTransformPanel');\n }\n else if (that.snap) {\n var xChanged = (Math.round(posX \/ that.snap) * that.snap) !==\n (Math.round(startX \/ that.snap) * that.snap);\n var yChanged = (Math.round(posY \/ that.snap) * that.snap) !==\n (Math.round(startY \/ that.snap) * that.snap);\n if (xChanged || yChanged) {\n that.trigger('showTransformPanel');\n }\n }\n\n that.$element.css({left: posX, top: posY});\n\n if (that.dnb) {\n that.dnb.updateCoordinates();\n }\n\n if (that.moveCallback !== undefined) {\n that.moveCallback(x, y, that.$element);\n }\n};\n\n\/**\n * Stop tracking the mouse.\n *\n * @param {Object} event\n * @returns {undefined}\n *\/\nH5P.DragNDrop.release = function (event) {\n var that = event.data.instance;\n\n H5P.$window\n .unbind('mousemove', H5P.DragNDrop.moveHandler)\n .unbind('mouseup', H5P.DragNDrop.release);\n\n H5P.$body\n .css({'-moz-user-select': '', '-webkit-user-select': ''\/*, 'user-select': '', '-ms-user-select': ''*\/})\n .removeAttr('unselectable')[0]\n .onselectstart = H5P.$body[0].ondragstart = null;\n\n if (that.releaseCallback !== undefined) {\n that.releaseCallback();\n }\n\n if (that.moving) {\n that.$element.removeClass('h5p-moving');\n if (that.stopMovingCallback !== undefined) {\n that.stopMovingCallback(event);\n }\n }\n\n \/\/ trigger to hide the transform panel unless it was activated\n \/\/ through the context menu\n that.trigger('hideTransformPanel');\n};\n","https:\/\/opleiden.syntra-ab.be\/moodle\/pluginfile.php\/1\/mod_hvp\/libraries\/H5P.DragNResize-1.2\/H5P.DragNResize.js?ver=1.2.5":"\n\/*global H5P*\/\nH5P.DragNResize = (function ($, EventDispatcher) {\n\n \/**\n * Constructor!\n *\n * @class H5P.DragNResize\n * @param {H5P.jQuery} $container\n *\/\n function C($container) {\n var self = this;\n this.$container = $container;\n self.disabledModifiers = false;\n\n EventDispatcher.call(this);\n\n \/\/ Override settings for snapping to grid, and locking aspect ratio.\n H5P.$body.keydown(function (event) {\n if (self.disabledModifiers) {\n return;\n }\n\n if (event.keyCode === 17) {\n \/\/ Ctrl\n self.revertSnap = true;\n }\n else if (event.keyCode === 16) {\n \/\/ Shift\n self.revertLock = true;\n }\n }).keyup(function (event) {\n if (self.disabledModifiers) {\n return;\n }\n\n if (event.keyCode === 17) {\n \/\/ Ctrl\n self.revertSnap = false;\n }\n else if (event.keyCode === 16) {\n \/\/ Shift\n self.revertLock = false;\n }\n });\n }\n\n \/\/ Inheritance\n C.prototype = Object.create(EventDispatcher.prototype);\n C.prototype.constructor = C;\n\n \/**\n * Gives the given element a resize handle.\n *\n * @param {H5P.jQuery} $element\n * @param {Object} [options]\n * @param {boolean} [options.lock]\n * @param {boolean} [options.cornerLock]\n *\/\n C.prototype.add = function ($element, options) {\n var that = this;\n\n \/\/ Array with position of handles\n var cornerPositions = ['nw', 'ne', 'sw', 'se'];\n var edgePositions = ['n', 'w', 'e', 's'];\n\n var addResizeHandle = function (position, corner) {\n $('
', {\n 'class': 'h5p-dragnresize-handle ' + position\n }).mousedown(function (event) {\n that.lock = (options && (options.lock || corner && options.cornerLock));\n if (options.cornerLock) {\n that.isImage = true;\n }\n that.$element = $element;\n that.press(event.clientX, event.clientY, position);\n }).data('position', position)\n .appendTo($element);\n };\n\n cornerPositions.forEach(function (pos) {\n addResizeHandle(pos, true);\n });\n\n \/\/ Add edge handles\n if (!options || !options.lock) {\n edgePositions.forEach(function (pos) {\n addResizeHandle(pos);\n });\n }\n };\n\n \/**\n * Get paddings for the element\n *\/\n C.prototype.getElementPaddings = function () {\n return {\n horizontal: Number(this.$element.css('padding-left').replace(\"px\", \"\")) + Number(this.$element.css('padding-right').replace(\"px\", \"\")),\n vertical: Number(this.$element.css('padding-top').replace(\"px\", \"\")) + Number(this.$element.css('padding-bottom').replace(\"px\", \"\"))\n };\n };\n\n \/**\n * Get borders for the element\n * @returns {{horizontal: number, vertical: number}}\n *\/\n C.prototype.getElementBorders = function () {\n return {\n horizontal: Number(this.$element.css('border-left-width').replace('px', '')) + Number(this.$element.css('border-right-width').replace('px', '')),\n vertical: Number(this.$element.css('border-top-width').replace('px', '')) + Number(this.$element.css('border-bottom-width').replace('px', ''))\n };\n };\n\n C.prototype.setContainerEm = function (containerEm) {\n this.containerEm = containerEm;\n };\n\n \/**\n * Start resizing\n *\n * @param {number} x\n * @param {number} y\n * @param {String} [direction] Direction of resize\n *\/\n C.prototype.press = function (x, y, direction) {\n this.active = true;\n var eventData = {\n instance: this,\n direction: direction\n };\n\n H5P.$window\n .bind('mouseup', eventData, C.release)\n .mousemove(eventData, C.move);\n\n H5P.$body\n .css({\n '-moz-user-select': 'none',\n '-webkit-user-select': 'none',\n 'user-select': 'none',\n '-ms-user-select': 'none'\n })\n .attr('unselectable', 'on')[0]\n .onselectstart = H5P.$body[0].ondragstart = function () {\n return false;\n };\n\n this.startX = x;\n this.startY = y;\n this.padding = this.getElementPaddings();\n this.borders = this.getElementBorders();\n this.startWidth = this.$element.outerWidth();\n this.startHeight = this.$element.outerHeight();\n this.ratio = (this.startWidth \/ this.startHeight);\n var position = this.$element.position();\n this.left = position.left;\n this.top = position.top;\n this.containerWidth = this.$container.width();\n this.containerHeight = this.$container.height();\n\n \/\/ Set default values\n this.newLeft = this.left;\n this.newTop = this.top;\n this.newWidth = this.startWidth;\n this.newHeight = this.startHeight;\n\n this.trigger('startResizing', eventData);\n\n \/\/ Show transform panel\n this.trigger('showTransformPanel');\n };\n\n \/**\n * Resize events\n *\n * @param {Event} event\n *\/\n C.move = function (event) {\n var direction = (event.data.direction ? event.data.direction : 'se');\n var that = event.data.instance;\n var moveW = (direction === 'nw' || direction === 'sw' || direction === 'w');\n var moveN = (direction === 'nw' || direction === 'ne' || direction === 'n');\n var moveDiagonally = (direction === 'nw' || direction === 'ne' || direction === 'sw' || direction === 'se');\n var movesHorizontal = (direction === 'w' || direction === 'e');\n var movesVertical = (direction === 'n' || direction === 's');\n var deltaX = that.startX - event.clientX;\n var deltaY = that.startY - event.clientY;\n\n that.minLeft = that.left + that.startWidth - H5P.DragNResize.MIN_SIZE;\n that.minTop = that.top + that.startHeight - H5P.DragNResize.MIN_SIZE;\n\n \/\/ Moving west\n if (moveW) {\n that.newLeft = that.left - deltaX;\n that.newWidth = that.startWidth + deltaX;\n\n \/\/ Check edge cases\n if (that.newLeft < 0) {\n that.newLeft = 0;\n that.newWidth = that.left + that.startWidth;\n }\n else if (that.newLeft > that.minLeft) {\n that.newLeft = that.minLeft;\n that.newWidth = that.left - that.minLeft + that.startWidth;\n }\n\n \/\/ Snap west side\n if (that.snap && !that.revertSnap) {\n that.newLeft = Math.round(that.newLeft \/ that.snap) * that.snap;\n\n \/\/ Make sure element does not snap east\n if (that.newLeft > that.minLeft) {\n that.newLeft = Math.floor(that.minLeft \/ that.snap) * that.snap;\n }\n\n that.newWidth = (that.left - that.newLeft) + that.startWidth;\n }\n }\n else if (!movesVertical) {\n that.newWidth = that.startWidth - deltaX;\n\n \/\/ Snap width\n if (that.snap && !that.revertSnap) {\n that.newWidth = Math.round(that.newWidth \/ that.snap) * that.snap;\n }\n\n if (that.left + that.newWidth > that.containerWidth) {\n that.newWidth = that.containerWidth - that.left;\n }\n }\n\n \/\/ Moving north\n if (moveN) {\n that.newTop = that.top - deltaY;\n that.newHeight = that.startHeight + deltaY;\n\n \/\/ Check edge cases\n if (that.newTop < 0) {\n that.newTop = 0;\n that.newHeight = that.top + that.startHeight;\n }\n else if (that.newTop > that.minTop) {\n that.newTop = that.minTop;\n that.newHeight = that.top - that.minTop + that.startHeight;\n }\n\n \/\/ Snap north\n if (that.snap && !that.revertSnap) {\n that.newTop = Math.round(that.newTop \/ that.snap) * that.snap;\n\n \/\/ Make sure element does not snap south\n if (that.newTop > that.minTop) {\n that.newTop = Math.floor(that.minTop \/ that.snap) * that.snap;\n }\n\n that.newHeight = (that.top - that.newTop) + that.startHeight;\n }\n }\n else if (!movesHorizontal) {\n that.newHeight = that.startHeight - deltaY;\n\n \/\/ Snap height\n if (that.snap && !that.revertSnap) {\n that.newHeight = Math.round(that.newHeight \/ that.snap) * that.snap;\n }\n\n if (that.top + that.newHeight > that.containerHeight) {\n that.newHeight = that.containerHeight - that.top;\n }\n }\n\n \/\/ Set min size\n if (that.newWidth <= H5P.DragNResize.MIN_SIZE) {\n that.newWidth = H5P.DragNResize.MIN_SIZE;\n }\n\n if (that.newHeight <= H5P.DragNResize.MIN_SIZE) {\n that.newHeight = H5P.DragNResize.MIN_SIZE;\n }\n\n \/\/ Apply ratio lock for elements except images, they have a their own specific for corner cases\n var lock = (that.revertLock ? !that.lock : that.lock);\n if (lock && (moveDiagonally || !that.isImage)) {\n that.lockDimensions(moveW, moveN, movesVertical, movesHorizontal);\n }\n\n \/\/ Reduce size by padding and borders\n that.finalWidth = that.newWidth;\n that.finalHeight = that.newHeight;\n if (that.$element.css('boxSizing') !== 'border-box') {\n that.finalWidth -= (that.padding.horizontal + that.borders.horizontal);\n that.finalHeight -= (that.padding.vertical + that.borders.vertical);\n }\n\n that.$element.css({\n width: (that.finalWidth \/ that.containerEm) + 'em',\n height: (that.finalHeight \/ that.containerEm) + 'em',\n left: ((that.newLeft \/ that.containerWidth) * 100) + '%',\n top: ((that.newTop \/ that.containerHeight) * 100) + '%'\n });\n\n that.trigger('moveResizing');\n };\n\n \/**\n * Changes element values depending on moving direction of the element\n * @param isMovingWest\n * @param isMovingNorth\n * @param movesVertical\n * @param movesHorizontal\n *\/\n C.prototype.lockDimensions = function (isMovingWest, isMovingNorth, movesVertical, movesHorizontal) {\n var self = this;\n\n \/\/ Cap movement at top\n var lockTop = function (isMovingNorth) {\n if (!isMovingNorth) {\n return;\n }\n\n self.newTop = self.top - (self.newHeight - self.startHeight);\n\n \/\/ Edge case\n if (self.newTop <= 0) {\n self.newTop = 0;\n }\n };\n\n \/\/ Expand to longest edge\n if (movesVertical) {\n this.newWidth = this.newHeight * this.ratio;\n\n \/\/ Make sure locked ratio does not cause size to go below min size\n if (this.newWidth < H5P.DragNResize.MIN_SIZE) {\n this.newWidth = H5P.DragNResize.MIN_SIZE;\n this.newHeight = H5P.DragNResize.MIN_SIZE \/ this.ratio;\n }\n }\n else if (movesHorizontal) {\n this.newHeight = this.newWidth \/ this.ratio;\n\n \/\/ Make sure locked ratio does not cause size to go below min size\n if (this.newHeight < H5P.DragNResize.MIN_SIZE) {\n this.newHeight = H5P.DragNResize.MIN_SIZE;\n this.newWidth = H5P.DragNResize.MIN_SIZE * this.ratio;\n }\n }\n else if (this.newWidth \/ this.startWidth > this.newHeight \/ this.startHeight) {\n \/\/ Expand to width\n this.newHeight = this.newWidth \/ this.ratio;\n }\n else {\n \/\/ Expand to height\n this.newWidth = this.newHeight * this.ratio;\n }\n\n \/\/ Change top to match new height\n if (isMovingNorth) {\n lockTop(isMovingNorth);\n\n if (self.newTop <= 0) {\n self.newHeight = self.top + self.startHeight;\n self.newWidth = self.newHeight * self.ratio;\n }\n }\n else {\n \/\/ Too high\n if (this.top + this.newHeight > this.containerHeight) {\n this.newHeight = this.containerHeight - this.top;\n this.newWidth = this.newHeight * this.ratio;\n }\n }\n\n \/\/ Change left to match new width\n if (isMovingWest) {\n this.newLeft = this.left - (this.newWidth - this.startWidth);\n \/\/ Edge case\n if (this.newLeft <= 0) {\n this.newLeft = 0;\n this.newWidth = this.left + this.startWidth;\n this.newHeight = this.newWidth \/ this.ratio;\n }\n }\n else {\n \/\/ Too wide\n if (this.left + this.newWidth > this.containerWidth) {\n this.newWidth = this.containerWidth - this.left;\n this.newHeight = this.newWidth \/ this.ratio;\n }\n }\n\n \/\/ Need to re-lock top in case height changed\n lockTop(isMovingNorth);\n };\n\n \/**\n * Stop resizing\n *\n * @param {Event} event\n *\/\n C.release = function (event) {\n var that = event.data.instance;\n that.active = false;\n\n H5P.$window\n .unbind('mouseup', C.release)\n .unbind('mousemove', C.move);\n\n H5P.$body\n .css({\n '-moz-user-select': '',\n '-webkit-user-select': '',\n 'user-select': '',\n '-ms-user-select': ''\n })\n .removeAttr('unselectable')[0]\n .onselectstart = H5P.$body[0].ondragstart = null;\n\n if (that.newWidth !== that.startWidth ||\n that.newHeight !== that.startHeight) {\n \/\/ Stopped resizing send width and height in Ems\n that.trigger('stoppedResizing', {\n left: that.newLeft,\n top: that.newTop,\n width: that.finalWidth \/ that.containerEm,\n height: that.finalHeight \/ that.containerEm\n });\n }\n\n \/\/ Refocus element after resizing it. Apply timeout since focus is lost at the end of mouse event.\n setTimeout(function () {\n that.$element.focus();\n }, 0);\n\n \/\/ trigger to hide the transform panel unless it was activated\n \/\/ through the context menu\n that.trigger('hideTransformPanel');\n };\n\n \/**\n * Toggle modifiers when we are not interacting with drag objects.\n * @param {boolean} [enable]\n *\/\n C.prototype.toggleModifiers = function (enable) {\n this.disabledModifiers = enable === undefined ? !this.disabledModifiers : !enable;\n };\n\n C.MIN_SIZE = 24;\n\n return C;\n})(H5P.jQuery, H5P.EventDispatcher);\n","https:\/\/opleiden.syntra-ab.be\/moodle\/pluginfile.php\/1\/mod_hvp\/libraries\/H5P.DragNBar-1.4\/scripts\/drag-n-bar.js?ver=1.4.6":"\n\nH5P.DragNBar = (function (EventDispatcher) {\n var nextInstanceIndex = 0;\n\n \/**\n * Constructor. Initializes the drag and drop menu bar.\n *\n * @class\n * @param {Array} buttons\n * @param {H5P.jQuery} $container\n * @param {H5P.jQuery} $dialogContainer\n * @param {object} [options] Collection of options\n * @param {boolean} [options.disableEditor=false] Determines if DragNBar should be displayed in view or editor mode\n * @param {H5P.jQuery} [options.$blurHandlers] When clicking these element(s) dnb focus will be lost\n *\/\n function DragNBar(buttons, $container, $dialogContainer, options) {\n var self = this;\n\n EventDispatcher.call(this);\n this.overflowThreshold = 13; \/\/ How many buttons to display before we add the more button.\n this.buttons = buttons;\n this.$container = $container;\n this.$dialogContainer = $dialogContainer;\n this.dnd = new H5P.DragNDrop(this, $container);\n this.dnd.snap = 10;\n this.newElement = false;\n var defaultOptions = {\n disableEditor: false\n };\n options = H5P.jQuery.extend(defaultOptions, options);\n this.isEditor = !options.disableEditor;\n this.$blurHandlers = options.$blurHandlers ? options.$blurHandlers : undefined;\n this.instanceIndex = nextInstanceIndex++;\n\n \/**\n * Keeps track of created DragNBar elements\n * @type {Array}\n *\/\n this.elements = [];\n\n \/\/ Create a popup dialog\n this.dialog = new H5P.DragNBarDialog($dialogContainer, $container);\n\n \/\/ Fix for forcing redraw on $container, to avoid \"artifcats\" on safari\n this.$container.addClass('hardware-accelerated');\n\n if (this.isEditor) {\n this.transformButtonActive = false;\n this.initEditor();\n this.initClickListeners();\n\n H5P.$window.resize(function () {\n self.resize();\n });\n }\n }\n\n \/\/ Inherit support for events\n DragNBar.prototype = Object.create(EventDispatcher.prototype);\n DragNBar.prototype.constructor = DragNBar;\n\n return DragNBar;\n})(H5P.EventDispatcher);\n\n\/**\n * Initializes editor functionality of DragNBar\n *\/\nH5P.DragNBar.prototype.initEditor = function () {\n var that = this;\n this.dnr = new H5P.DragNResize(this.$container);\n this.dnr.snap = 10;\n\n \/\/ Update coordinates when element is resized\n this.dnr.on('moveResizing', function () {\n var offset = that.$element.offset();\n var position = that.$element.position();\n that.updateCoordinates(offset.left, offset.top, position.left, position.top);\n });\n\n \/\/ Set pressed to not lose focus at the end of resize\n this.dnr.on('stoppedResizing', function () {\n that.pressed = true;\n\n \/\/ Delete pressed after dnbelement has been refocused so it will lose focus on single click.\n setTimeout(function () {\n delete that.pressed;\n }, 10);\n });\n\n \/**\n * Show transform panel listeners\n *\/\n this.dnr.on('showTransformPanel', function () {\n transformPanel(true);\n });\n this.dnd.on('showTransformPanel', function () {\n transformPanel(true);\n });\n\n \/**\n * Hide transform panel listeners\n *\/\n this.dnr.on('hideTransformPanel', function () {\n if(!that.transformButtonActive) {\n transformPanel(false);\n }\n });\n this.dnd.on('hideTransformPanel', function () {\n if(!that.transformButtonActive) {\n transformPanel(false);\n }\n });\n\n \/**\n * Trigger a context menu transform to either show or hide\n * the transform panel.\n *\n * @param {boolean} show\n *\/\n function transformPanel(show) {\n if (that.focusedElement) {\n that.focusedElement.contextMenu.trigger('contextMenuTransform', {showTransformPanel: show});\n }\n }\n\n this.dnd.startMovingCallback = function () {\n that.dnd.min = {x: 0, y: 0};\n that.dnd.max = {\n x: that.$container.width() - that.$element.outerWidth(),\n y: that.$container.height() - that.$element.outerHeight()\n };\n\n if (that.newElement) {\n that.dnd.adjust.x = 10;\n that.dnd.adjust.y = 10;\n that.dnd.min.y -= that.$list.height();\n }\n\n return true;\n };\n\n this.dnd.stopMovingCallback = function () {\n var pos = {};\n\n if (that.newElement) {\n that.$container.css('overflow', '');\n if (Math.round(parseFloat(that.$element.css('top'))) < 0) {\n \/\/ Try to center element, but avoid overlapping\n pos.x = (that.dnd.max.x \/ 2);\n pos.y = (that.dnd.max.y \/ 2);\n that.avoidOverlapping(pos, that.$element);\n }\n }\n\n if (pos.x === undefined || pos.y === undefined ) {\n pos.x = Math.round(parseFloat(that.$element.css('left')));\n pos.y = Math.round(parseFloat(that.$element.css('top')));\n }\n\n that.stopMoving(pos.x, pos.y);\n that.newElement = false;\n\n delete that.dnd.min;\n delete that.dnd.max;\n };\n};\n\n\/**\n * Tries to position the given element close to the requested coordinates.\n * Element can be skipped to check if spot is available.\n *\n * @param {object} pos\n * @param {number} pos.x\n * @param {number} pos.y\n * @param {(H5P.jQuery|Object)} element object with width&height if ran before insertion.\n *\/\nH5P.DragNBar.prototype.avoidOverlapping = function (pos, $element) {\n \/\/ Determine size of element\n var size = $element;\n if (size instanceof H5P.jQuery) {\n size = window.getComputedStyle(size[0]);\n size = {\n width: parseFloat(size.width),\n height: parseFloat(size.height)\n };\n }\n else {\n $element = undefined;\n }\n\n \/\/ Determine how much they can be manuvered\n var containerStyle = window.getComputedStyle(this.$container[0]);\n var manX = parseFloat(containerStyle.width) - size.width;\n var manY = parseFloat(containerStyle.height) - size.height;\n\n var limit = 16;\n var attempts = 0;\n\n while (attempts < limit && this.elementOverlaps(pos.x, pos.y, $element)) {\n \/\/ Try to place randomly inside container\n if (manX > 0) {\n pos.x = Math.floor(Math.random() * manX);\n }\n if (manY > 0) {\n pos.y = Math.floor(Math.random() * manY);\n }\n attempts++;\n }\n};\n\n\/**\n * Determine if moving the given element to its new position will cause it to\n * cover another element. This can make new or pasted elements difficult to see.\n * Element can be skipped to check if spot is available.\n *\n * @param {number} x\n * @param {number} y\n * @param {H5P.jQuery} [$element]\n * @returns {boolean}\n *\/\nH5P.DragNBar.prototype.elementOverlaps = function (x, y, $element) {\n var self = this;\n\n \/\/ Use snap grid\n x = Math.round(x \/ 10);\n y = Math.round(y \/ 10);\n\n for (var i = 0; i < self.elements.length; i++) {\n var element = self.elements[i];\n if ($element !== undefined && element.$element === $element) {\n continue;\n }\n\n if (x === Math.round(parseFloat(element.$element.css('left')) \/ 10) &&\n y === Math.round(parseFloat(element.$element.css('top')) \/ 10)) {\n return true; \/\/ Stop loop\n }\n }\n\n return false;\n};\n\n\/\/ Key coordinates\nvar SHIFT = 16;\nvar CTRL = 17;\nvar DELETE = 46;\nvar BACKSPACE = 8;\nvar C = 67;\nvar V = 86;\nvar LEFT = 37;\nvar UP = 38;\nvar RIGHT = 39;\nvar DOWN = 40;\n\n\/\/ Keep track of key state\nvar ctrlDown = false;\n\n\/\/ How many pixels to move\nvar snapAmount = 1;\n\n\/**\n * Handle keydown events for the entire frame\n *\/\nH5P.DragNBar.keydownHandler = function (event) {\n var self = event.data.instance;\n var activeElement = document.activeElement;\n\n if (event.which === CTRL) {\n ctrlDown = true;\n\n if (self.dnd.snap !== undefined) {\n \/\/ Disable snapping\n delete self.dnd.snap;\n }\n }\n\n if (event.which === SHIFT) {\n snapAmount = self.dnd.snap;\n }\n\n if (event.which === LEFT && self.focusedElement) {\n if (activeElement.contentEditable === 'true' || activeElement.value !== undefined) {\n return;\n }\n event.preventDefault();\n self.moveWithKeys(-snapAmount, 0);\n }\n else if (event.which === UP && self.focusedElement) {\n if (activeElement.contentEditable === 'true' || activeElement.value !== undefined) {\n return;\n }\n event.preventDefault();\n self.moveWithKeys(0, -snapAmount);\n }\n else if (event.which === RIGHT && self.focusedElement) {\n if (activeElement.contentEditable === 'true' || activeElement.value !== undefined) {\n return;\n }\n event.preventDefault();\n self.moveWithKeys(snapAmount, 0);\n }\n else if (event.which === DOWN && self.focusedElement) {\n if (activeElement.contentEditable === 'true' || activeElement.value !== undefined) {\n return;\n }\n event.preventDefault();\n self.moveWithKeys(0, snapAmount);\n }\n else if (event.which === C && ctrlDown && self.focusedElement && self.$container.is(':visible')) {\n \/\/ Copy element params to clipboard\n var elementSize = window.getComputedStyle(self.focusedElement.$element[0]);\n var width = parseFloat(elementSize.width);\n var height = parseFloat(elementSize.height) \/ width;\n width = width \/ (parseFloat(window.getComputedStyle(self.$container[0]).width) \/ 100);\n height *= width;\n\n self.focusedElement.toClipboard(width, height);\n }\n else if (event.which === V && ctrlDown && window.localStorage && self.$container.is(':visible')) {\n if (self.preventPaste || self.dialog.isOpen() || activeElement.contentEditable === 'true' || activeElement.value !== undefined) {\n \/\/ Don't allow paste if dialog is open or active element can be modified\n return;\n }\n\n var clipboardData = localStorage.getItem('h5pClipboard');\n if (clipboardData) {\n \/\/ Parse\n try {\n clipboardData = JSON.parse(clipboardData);\n }\n catch (err) {\n console.error('Unable to parse JSON from clipboard.', err);\n return;\n }\n\n \/\/ Update file URLs\n H5P.DragNBar.updateFileUrls(clipboardData.specific, function (path) {\n var isTmpFile = (path.substr(-4,4) === '#tmp');\n if (!isTmpFile && clipboardData.contentId) {\n \/\/ Comes from existing content\n\n if (H5PEditor.contentId) {\n \/\/ .. to existing content\n return '..\/' + clipboardData.contentId + '\/' + path;\n }\n else {\n \/\/ .. to new content\n return (H5PEditor.contentRelUrl ? H5PEditor.contentRelUrl : '..\/content\/') + clipboardData.contentId + '\/' + path;\n }\n }\n return path; \/\/ Will automatically be looked for in tmp folder\n });\n\n if (clipboardData.generic) {\n \/\/ Use reference instead of key\n clipboardData.generic = clipboardData.specific[clipboardData.generic];\n\n \/\/ Avoid multiple content with same ID\n delete clipboardData.generic.subContentId;\n }\n\n self.trigger('paste', clipboardData);\n }\n }\n else if ((event.which === DELETE || event.which === BACKSPACE) && self.focusedElement && self.$container.is(':visible') && activeElement.tagName.toLowerCase() !== 'input') {\n if (self.pressed === undefined) {\n self.focusedElement.contextMenu.trigger('contextMenuRemove');\n event.preventDefault(); \/\/ Prevent browser navigating back\n }\n }\n};\n\n\/**\n * Handle keypress events for the entire frame\n *\/\nH5P.DragNBar.keypressHandler = function (event) {\n var self = event.data.instance;\n if (event.which === BACKSPACE && self.focusedElement && self.$container.is(':visible') && document.activeElement.tagName.toLowerCase() !== 'input') {\n event.preventDefault(); \/\/ Prevent browser navigating back\n }\n};\n\n\/**\n * Handle keyup events for the entire frame\n *\/\nH5P.DragNBar.keyupHandler = function (event) {\n var self = event.data.instance;\n\n if (event.which === CTRL) {\n \/\/ Update key state\n ctrlDown = false;\n\n \/\/ Enable snapping\n self.dnd.snap = 10;\n }\n if (event.which === SHIFT) {\n snapAmount = 1;\n }\n\n if (self.focusedElement && (event.which === LEFT || event.which === UP || event.which === RIGHT || event.which === DOWN)) {\n \/\/ Store position of element after moving\n var position = self.getElementSizeNPosition();\n self.stopMoving(Math.round(position.left), Math.round(position.top));\n }\n};\n\n\/**\n * Handle click events for the entire frame\n *\/\nH5P.DragNBar.clickHandler = function (event) {\n var self = event.data.instance;\n\n \/\/ Remove pressed on click\n delete self.pressed;\n};\n\n\/**\n * Initialize click listeners\n *\/\nH5P.DragNBar.prototype.initClickListeners = function () {\n var self = this;\n var index = self.instanceIndex;\n\n \/\/ Register event listeners\n var eventData = {\n instance: self\n };\n H5P.$body.on('keydown.dnb' + index, eventData, H5P.DragNBar.keydownHandler)\n .on('keypress.dnb' + index, eventData, H5P.DragNBar.keypressHandler)\n .on('keyup.dnb' + index, eventData, H5P.DragNBar.keyupHandler)\n .on('click.dnb' + index,eventData, H5P.DragNBar.clickHandler);\n\n \/\/ Set blur handler element if option has been specified\n var $blurHandlers = this.$container;\n if (this.$blurHandlers) {\n $blurHandlers = this.$blurHandlers;\n }\n\n function handleBlur() {\n \/\/ Remove coordinates picker if we didn't press an element.\n if (self.pressed !== undefined) {\n delete self.pressed;\n }\n else {\n self.blurAll();\n if (self.focusedElement !== undefined) {\n delete self.focusedElement;\n }\n }\n }\n\n $blurHandlers\n .keydown(function (e) {\n if (e.which === 9) { \/\/ pressed tab\n handleBlur();\n }\n })\n .click(handleBlur);\n};\n\n\/**\n * Update file URLs. Useful when copying between different contents.\n *\n * @param {object} params Reference\n * @param {function} handler Modifies the path to work when pasted\n *\/\nH5P.DragNBar.updateFileUrls = function (params, handler) {\n for (var prop in params) {\n if (params.hasOwnProperty(prop) && params[prop] instanceof Object) {\n var obj = params[prop];\n if (obj.path !== undefined && obj.mime !== undefined) {\n obj.path = handler(obj.path);\n }\n else {\n H5P.DragNBar.updateFileUrls(obj, handler);\n }\n }\n }\n};\n\n\/**\n * Attaches the menu bar to the given wrapper.\n *\n * @param {jQuery} $wrapper\n * @returns {undefined}\n *\/\nH5P.DragNBar.prototype.attach = function ($wrapper) {\n $wrapper.html('');\n $wrapper.addClass('h5peditor-dragnbar');\n\n var $list = H5P.jQuery('