@project-sunbird/sunbird-quml-player-web-component

Version:

The web component package for the sunbird QuML player

65 lines (54 loc) • 11.2 kB

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QUML Player web component demo</title> <link rel="stylesheet" href="./styles.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> <style> .player-grid { width: 100%; height: 100vh; margin: 0 auto; display: grid; @media screen and (max-width:768px) { grid-template-columns: 100%; gap: 0px; } } </style> </head> <body> <div class="player-grid" id="my-player"> </div> <script type="text/javascript" src="sunbird-quml-player.js"></script> <script type="text/javascript"> const sectionContent = {"copyright":"sunbird","lastStatusChangedOn":"2023-12-22T04:16:50.242+0000","timeLimits":{"questionSet":{"max":0,"min":0}},"author":"contentCreator","children":[{"lastStatusChangedOn":"2023-12-22T04:16:50.190+0000","timeLimits":{"questionSet":{"max":0,"min":0}},"parent":"do_11395276467516211211","children":[{"copyright":"sunbird","lastStatusChangedOn":"2023-12-22T04:17:26.313+0000","parent":"do_11395276534294118411","author":"contentCreator","name":"Even","createdOn":"2023-12-22T04:15:08.148+0000","channel":"0137541424673095687","maxScore":1,"lastUpdatedOn":"2023-12-22T04:17:26.313+0000","subject":["Accountancy"],"showTimer":false,"identifier":"do_11395276601870745611","gradeLevel":["Class 1"],"compatibilityLevel":5,"audience":["Administrator"],"se_boards":["State(Tamil Nadu)"],"primaryCategory":"Multiple Choice Question","se_mediums":["English"],"downloadUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/question/do_11395276601870745611/even_1703218645713_do_11395276601870745611_1.ecar","se_subjects":["Accountancy"],"medium":["English"],"interactionTypes":["choice"],"framework":"tn_k-12","versionKey":"1703218508733","mimeType":"application/vnd.sunbird.question","code":"8646c6d6-8443-42e7-86b0-01181a18b7ff","license":"CC BY 4.0","qumlVersion":1.1,"prevStatus":"Draft","showHints":false,"templateId":"mcq-vertical","language":["English"],"board":"State(Tamil Nadu)","showFeedback":false,"objectType":"Question","status":"Live","createdBy":"155ce3c5-713e-4749-bc1c-95d09c640914","contentEncoding":"gzip","depth":2,"lastPublishedBy":"469dc732-04f3-42d9-9a85-30957a797acc","se_gradeLevels":["Class 1"],"se_FWIds":["tn_k-12"],"allowAnonymousAccess":"Yes","contentDisposition":"inline","schemaVersion":"1.1","artifactUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/question/do_11395276601870745611/do_11395276601870745611_1703218644890.zip","complexityLevel":["analyse"],"visibility":"Parent","qType":"MCQ","showSolutions":false,"variants":{"full":{"ecarUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/question/do_11395276601870745611/even_1703218645713_do_11395276601870745611_1.ecar","size":"3016"},"online":{"ecarUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/question/do_11395276601870745611/even_1703218645900_do_11395276601870745611_1_ONLINE.ecar","size":"1451"}},"index":1,"pkgVersion":1},{"copyright":"sunbird","lastStatusChangedOn":"2023-12-22T04:17:26.866+0000","parent":"do_11395276534294118411","author":"contentCreator","name":"PM","createdOn":"2023-12-22T04:16:40.428+0000","channel":"0137541424673095687","maxScore":1,"lastUpdatedOn":"2023-12-22T04:17:26.866+0000","subject":["Accountancy"],"showTimer":false,"identifier":"do_11395276677466521611","gradeLevel":["Class 1"],"compatibilityLevel":5,"audience":["Administrator"],"se_boards":["State(Tamil Nadu)"],"primaryCategory":"Multiple Choice Question","se_mediums":["English"],"downloadUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/question/do_11395276677466521611/pm_1703218646537_do_11395276677466521611_1.ecar","se_subjects":["Accountancy"],"medium":["English"],"interactionTypes":["choice"],"framework":"tn_k-12","versionKey":"1703218600454","mimeType":"application/vnd.sunbird.question","code":"eea9e994-346b-4fd0-99d2-9a8490a67bb5","license":"CC BY 4.0","qumlVersion":1.1,"prevStatus":"Draft","showHints":false,"templateId":"mcq-vertical","language":["English"],"board":"State(Tamil Nadu)","showFeedback":false,"objectType":"Question","status":"Live","createdBy":"155ce3c5-713e-4749-bc1c-95d09c640914","contentEncoding":"gzip","depth":2,"lastPublishedBy":"469dc732-04f3-42d9-9a85-30957a797acc","se_gradeLevels":["Class 1"],"se_FWIds":["tn_k-12"],"allowAnonymousAccess":"Yes","contentDisposition":"inline","schemaVersion":"1.1","artifactUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/question/do_11395276677466521611/do_11395276677466521611_1703218646415.zip","complexityLevel":[],"visibility":"Parent","qType":"MCQ","showSolutions":false,"variants":{"full":{"ecarUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/question/do_11395276677466521611/pm_1703218646537_do_11395276677466521611_1.ecar","size":"3007"},"online":{"ecarUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/question/do_11395276677466521611/pm_1703218646689_do_11395276677466521611_1_ONLINE.ecar","size":"1445"}},"index":2,"pkgVersion":1}],"name":"Section-1","navigationMode":"non-linear","createdOn":"2023-12-22T04:13:45.656+0000","channel":"0137541424673095687","generateDIALCodes":"No","lastUpdatedOn":"2023-12-22T04:16:50.190+0000","showTimer":false,"identifier":"do_11395276534294118411","description":"Section-1","containsUserData":"No","allowSkip":"Yes","compatibilityLevel":6,"trackable":{"enabled":"No","autoBatch":"No"},"primaryCategory":"Practice Question Set","setType":"materialised","languageCode":["en"],"attributions":[],"scoreCutoffType":"AssessmentLevel","versionKey":"1703218425656","mimeType":"application/vnd.sunbird.questionset","code":"a454255d-1ee0-48df-ae1b-66e69fcafea0","license":"CC BY 4.0","qumlVersion":1.1,"prevStatus":"Draft","showHints":false,"language":["English"],"showFeedback":false,"objectType":"QuestionSet","status":"Live","requiresSubmit":"No","shuffle":true,"contentEncoding":"gzip","depth":1,"allowAnonymousAccess":"Yes","contentDisposition":"inline","schemaVersion":"1.1","allowBranching":"No","visibility":"Parent","showSolutions":false,"index":1}],"name":"Sample QuestionSet V2","navigationMode":"non-linear","createdOn":"2023-12-22T04:12:24.845+0000","createdFor":["0137541424673095687"],"channel":"0137541424673095687","pdfUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/questionset/do_11395276467516211211/do_11395276467516211211_pdf_1703218647645.pdf","generateDIALCodes":"No","lastUpdatedOn":"2023-12-22T04:16:50.254+0000","subject":["Accountancy"],"size":7123,"showTimer":false,"identifier":"do_11395276467516211211","description":"Sample QuestionSet V2","gradeLevel":["Class 1"],"containsUserData":"No","allowSkip":"Yes","compatibilityLevel":6,"audience":["Administrator"],"trackable":{"enabled":"No","autoBatch":"No"},"se_boards":["State(Tamil Nadu)"],"primaryCategory":"Practice Question Set","setType":"materialised","appIcon":"","se_mediums":["English"],"downloadUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/questionset/do_11395276467516211211/sample-questionset-v2_1703218647276_do_11395276467516211211_1.ecar","se_subjects":["Accountancy"],"medium":["English"],"attributions":[],"scoreCutoffType":"AssessmentLevel","framework":"tn_k-12","versionKey":"1703218610254","mimeType":"application/vnd.sunbird.questionset","code":"38c8ed0e-fc76-4c5c-a161-e8908d70bd94","license":"CC BY 4.0","qumlVersion":1.1,"prevStatus":"Draft","showHints":false,"summaryType":"Complete","language":["English"],"board":"State(Tamil Nadu)","showFeedback":false,"lastPublishedOn":"2023-12-22T04:17:26.925+0000","objectType":"QuestionSet","status":"Live","createdBy":"155ce3c5-713e-4749-bc1c-95d09c640914","requiresSubmit":"No","shuffle":true,"contentEncoding":"gzip","depth":0,"consumerId":"bfe5883f-ac66-4744-a064-3ed88d986eba","lastPublishedBy":"469dc732-04f3-42d9-9a85-30957a797acc","se_gradeLevels":["Class 1"],"se_FWIds":["tn_k-12"],"allowAnonymousAccess":"Yes","contentDisposition":"inline","schemaVersion":"1.1","additionalCategories":[],"allowBranching":"No","previewUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/questionset/do_11395276467516211211/do_11395276467516211211_html_1703218647645.html","childNodes":["do_11395276601870745611","do_11395276534294118411","do_11395276677466521611"],"visibility":"Default","showSolutions":false,"variants":{"spine":{"ecarUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/questionset/do_11395276467516211211/sample-questionset-v2_1703218647008_do_11395276467516211211_1_SPINE.ecar","size":"3916"},"online":{"ecarUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/questionset/do_11395276467516211211/sample-questionset-v2_1703218647145_do_11395276467516211211_1_ONLINE.ecar","size":"3917"},"full":{"ecarUrl":"https://sunbirddev.blob.core.windows.net/sunbird-content-dev/questionset/do_11395276467516211211/sample-questionset-v2_1703218647276_do_11395276467516211211_1.ecar","size":"7123"}},"pkgVersion":1,"instructions":"<p>Sample QuestionSet V2</p>","outcomeDeclaration":{"maxScore":{"cardinality":"single","type":"integer","defaultValue":2}}}; const playerConfig = {"context":{"mode":"play","partner":[],"pdata":{"id":"dev.sunbird.portal","ver":"7.0.0","pid":"sunbird-portal"},"contentId":"do_11395276467516211211","sid":"b667b4e6-a4d5-4230-9609-9a4b97e87879","uid":"anonymous","timeDiff":-0.562,"channel":"0138934136407244800","tags":["0138934136407244800"],"did":"f4603b26b6d4491be363e9f8ade58231","contextRollup":{"l1":"0138934136407244800"},"objectRollup":{},"threshold":3,"userData":{"firstName":"Guest","lastName":""}},"metadata": sectionContent,"config":{"traceId":"1234","sideMenu":{"showShare":true,"showDownload":true,"showReplay":true,"showExit":true}}}; // Need to pass the API URL to fetch the question set window.questionListUrl = 'https://dev.sunbirded.org/api/question/v2/list'; const qumlPlayerElement = document.createElement('sunbird-quml-player'); qumlPlayerElement.setAttribute('player-config', JSON.stringify(playerConfig)); qumlPlayerElement.addEventListener('playerEvent', (event) => { console.log("On playerEvent", event); }); qumlPlayerElement.addEventListener('telemetryEvent', (event) => { console.log("On telemetryEvent", event); }); const myPlayer = document.getElementById("my-player"); myPlayer.appendChild(qumlPlayerElement); </script> </body> </html>