This is the source code, for the quiz tool on https://quiz.dbc.dk. In order to try out the quiz-editing part, you need a clientId/clientSecret to login, which danish libraries can get via a request to DBC, see description on https://openplatform.dbc.dk
The quiz can be embedded in other websites like this:
<div id="quizElem"></div>
<script>
var quiz;
function initOpenPlatformQuiz() {
quiz = new openPlatformQuiz.Widget({
elemId: 'quizElem',
extraSpacing: true,
openPlatformToken: 'fd9e275eeb36295971719a77df354f84e9f21ab3',
quizId: 'ffdfa65b-4b14-4bec-a4bb-5f2938eca897',
onDone: function(result) {
console.log(result);
}
});
}
</script>
<script src="https://quiz.dbc.dk/widget.js" async defer></script>The openPlatformToken has to be retrieved dynamically, as usual for openplatform access.
If extraSpacing is true, extra spacing is added to the embedded quiz, so it has at least the same height as the screen.
Approach to embedding is inspired by how YouTube and Google Maps are embedded. With regard to IFrame vs JavaScript approach, - embedding via JavaScript is choosen as this allows a more responsive view.
Statistics about agency can be submitted with the statisticsEvent method, a la:
openPlatformQuiz.statisticsEvent({
openPlatformToken: '18396c0d40f002d48809f946f96d314c1e01bcf0',
quizId: 'ffdfa65b-4b14-4bec-a4bb-5f2938eca897',
type: 'agency',
subtype: '770100'
})
onDone is used for getting the quiz state after the quiz has finished.
Current version uses create-react-app, so just npm install, and then npm start for development. This might later change to nwb or Neutrino (as recommended by create-react-app) to support npm package building.
Designwise we try to follow the guidelines Material Design. This simplifies and improves the visual design process, by avoiding a lot of bikeshedding, and having a common language. We use the components from Material-UI, and the same approach with JSS for styling.
State management is done using redux/thunk/immutable. All dispatches and state access happens through action creators and selectors.
Code style is enforced using prettier.
Changes based on user feedback, and various fixes. Ready for release when help-texts are updated.
- browser back button #285
- show maximum possible score when editing quiz endings #306
- admin in two columns with edit and preview #210 #282
- extra spacing in top/bottom of widget #290
- inline editing of quiz endings #287
- layout and quiz-templates #279 #280 #277 #275 #278 #286
- delete button improvements (delete question, button, background-image, ...) #289 #328 #279 #281
- refactoring / updates / test #238 #163 #292 #297
- bugfixes #321 #304 #296 #301 #295
- tooltips and documentation #284 #273 #293 #336 #291 #308 #274
- Statistics #55 #54
- Search #263 #165 #59
- Design / usability / cleanup: background color #248, delete-confirmation #222, emphasise own quizzes #265, quiz new window #245, others read-only #167, misc #249 #60 #104
- Bugfixes #246 #252
- quiz.dbc.dk - static pages for admin (with login) and widget #74 #168 #169 #223
- better data for new quiz/question/ending/... #213 #240 #157 #180
- Bugfixes #201 #233 #237
- Refactoring #215
- Videoes in quiz #64
- Image dialog, for uploading, deleting, browsing and selecting images stored in DÅP. #218 #230 #225 #216 #224 #130
- Implementation of widget design incl. image buttons and background image. #138 #220 #188 #189 #197 #196
- Text as markdown (working links, headings, etc...) #202
- Copy (#166), delete (#164), and create new (#56) quiz
- Fetch quizzes from backend #53, #179, #191, #193
- Store quizzes in backend #181, #102, #151, #162
- Initial static page for embedding widget + link to page from admin. #194
- Backend storage fixes: indexing #1001, #995 and timeout bug #992, wrong status response #997, refactor API #985
- Start on widget design #174 incl. UX-feedback, primary/secondary colors #190
- Start on statistics (define storage-type, and add API in embed code for submitting library info) #175, #171
- Start on UI for searching quizzes, - not yet functional #178, #161
- Embedding in Biblo https://biblo.demo.dbc.dk/test-sektionsside
- (work started on storing quizzes in openplatform, not done yet)
- Admin: Editable dispatch / quiz endings: #63, #145, #150, #143 #144
- Admin: Editable answers for question. #52, #132, #141, #140, #137
- Admin: Editable buttons
- Widget: setting trophies, and working
onDonecallback. #152 - In-person meeting, with discussion/clarification of project. #142
- Deployment of backend
- Edit individual question/resultpage/... #124, #125, #126
- Edit Quiz details #57
- Refactoring/cleanup/tests/robustness #106, #115, #114, #107, #121
- Reorder questions #99, #58
- Add Question #97
- Documentation/implementation of Code/API for embedding the quiz. #31, #66, #67, #71, #72, #73
- Sample quiz data, #49, #78
- Barebone quiz widget #52, #79, #82, #86, #87, #89
- Application non-visual design: issues #20, interaction-sketch-sketch #51,
- Infrastructure: hot-reloading #85, dbcdk-repository #25, more tests (#77, #91, #84), online demo on github #43
- Backend: image resizing #16, use postgres (#4, #45), scan (#32, #41, #4), misc improvements (#42, #23), cleanup and merge into serviceprovider #40
- Start admin: selector for question-list #96
- Set up project #1 #26
- Create repository
- React app
- Setup CI
- Setup Coveralls
- Setup issue tracking
- Code formatting with Prettier
- README with notes
- Data-model #10 #30
- setup react/redux for project
- initial draft of data model
- Initial backend #2 #5 #6 #8 #12 #11 #21 #22 #29
/storage-endpoint: get, put, find, delete (includes new serviceprovider branch various changes to serviceprovider: fix port-conflict, cjs vs esm, js-client configurable host, ...)- only for local development.
- examples / unit tests / documentation
- image support