Added question viewer functionality
Added view questions panel to editor interface Added view questions section of web site Added links to navbars
This commit is contained in:
@ -71,7 +71,7 @@
|
||||
margin: 30pt auto;
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
.info-panel, .viewer-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -84,4 +84,20 @@
|
||||
#alert-box {
|
||||
margin: 30px auto;
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.block {
|
||||
border: 2px solid black;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.question-body, .question-block {
|
||||
padding: 0px 2em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 0px 2em;
|
||||
font-style: italic;
|
||||
}
|
||||
@ -5,24 +5,69 @@ const id = $root.data('id')
|
||||
|
||||
const $control_panel = $('.control-panel')
|
||||
const $info_panel = $('.info-panel')
|
||||
const $viewer_panel = $('.viewer-panel')
|
||||
const $editor_panel = $('.editor-panel')
|
||||
|
||||
var toggle_info = false
|
||||
var toggle_viewer = false
|
||||
|
||||
var element_index = 0
|
||||
|
||||
// Initialise Sortable and trigger renumbering on end of drag
|
||||
Sortable.create($root.get(0), {handle: '.move-handle', onEnd: function(evt) {renumber_blocks()}})
|
||||
|
||||
// Info Button Listener
|
||||
// Info and Viewer Button Listener
|
||||
$control_panel.find('button').click(function(event){
|
||||
if ($info_panel.is(":hidden")) {
|
||||
$editor_panel.hide()
|
||||
$info_panel.fadeIn()
|
||||
$(this).addClass('active')
|
||||
} else {
|
||||
$info_panel.hide()
|
||||
$editor_panel.fadeIn()
|
||||
$(this).removeClass('active')
|
||||
var action = $(this).data('action');
|
||||
|
||||
if (action == 'info') {
|
||||
if ($info_panel.is(":hidden")) {
|
||||
if ($viewer_panel.is(":visible")) {
|
||||
toggle_viewer = true
|
||||
$viewer_panel.hide()
|
||||
}
|
||||
$editor_panel.hide()
|
||||
$info_panel.fadeIn()
|
||||
$(window).scrollTop(0)
|
||||
toggle_info = false
|
||||
$(this).addClass('active')
|
||||
} else {
|
||||
$info_panel.hide()
|
||||
if (toggle_viewer) {
|
||||
render_viewer()
|
||||
$(window).scrollTop(0)
|
||||
toggle_viewer = false
|
||||
} else {
|
||||
$editor_panel.fadeIn()
|
||||
$(window).scrollTop(0)
|
||||
}
|
||||
$(this).removeClass('active')
|
||||
}
|
||||
} else if (action == 'view') {
|
||||
if ($viewer_panel.is(":hidden")) {
|
||||
if ($info_panel.is(':visible')) {
|
||||
toggle_info = true
|
||||
$info_panel.hide()
|
||||
}
|
||||
$editor_panel.hide()
|
||||
render_viewer()
|
||||
$(window).scrollTop(0)
|
||||
toggle_viewer = false
|
||||
$(this).addClass('active')
|
||||
} else {
|
||||
$viewer_panel.hide()
|
||||
if (toggle_info) {
|
||||
$info_panel.fadeIn()
|
||||
$(window).scrollTop(0)
|
||||
toggle_info = false
|
||||
} else {
|
||||
$editor_panel.fadeIn()
|
||||
$(window).scrollTop(0)
|
||||
}
|
||||
$(this).removeClass('active')
|
||||
}
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
@ -496,4 +541,102 @@ $(window).on('load', function() {
|
||||
console.log(response)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// Viewer Render Function
|
||||
function render_viewer() {
|
||||
$viewer_panel.fadeIn()
|
||||
$viewer_panel.empty()
|
||||
var heading = document.createElement('h3')
|
||||
heading.innerText = 'View Questions'
|
||||
$viewer_panel.append(heading)
|
||||
var data = parse_input()
|
||||
var block
|
||||
var obj
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
block = data[i]
|
||||
obj = document.createElement('div')
|
||||
obj.classList = 'block'
|
||||
if (block['type'] == 'question') {
|
||||
text = document.createElement('p')
|
||||
text.innerHTML = `<strong>Question ${block['q_no'] + 1}.</strong> ${block['text']}`
|
||||
obj.append(text)
|
||||
question_body = document.createElement('div')
|
||||
question_body.className ='question-body'
|
||||
type = document.createElement('p')
|
||||
type.innerHTML = `<strong>Question Type:</strong> ${block['q_type']}`
|
||||
question_body.append(type)
|
||||
options = document.createElement('p')
|
||||
options.innerHTML = '<strong>Options:</strong>'
|
||||
option_list = document.createElement('ul')
|
||||
for (let _i = 0; _i < block['options'].length; _i++) {
|
||||
option = document.createElement('li')
|
||||
option.innerHTML = block['options'][_i]
|
||||
if (block['correct'] == _i) {
|
||||
option.innerHTML += ' <span class="badge rounded-pill bg-success">Correct</span>'
|
||||
}
|
||||
option_list.append(option)
|
||||
}
|
||||
options.append(option_list)
|
||||
question_body.append(options)
|
||||
tags = document.createElement('p')
|
||||
tags.innerHTML = `<strong>Tags:</strong>`
|
||||
tag_list = document.createElement('ul')
|
||||
for (let _i = 0; _i < block['tags'].length; _i++) {
|
||||
tag = document.createElement('li')
|
||||
tag.innerHTML = block['tags'][_i]
|
||||
tag_list.append(tag)
|
||||
}
|
||||
tags.append(tag_list)
|
||||
question_body.append(tags)
|
||||
obj.append(question_body)
|
||||
} else if (block['type'] == 'block') {
|
||||
meta = document.createElement('p')
|
||||
meta.innerHTML = `<strong>Block ${i+1}.</strong> ${block['questions'].length} questions.`
|
||||
obj.append(meta)
|
||||
header = document.createElement('blockquote')
|
||||
header.innerText = block['question_header']
|
||||
obj.append(header)
|
||||
var block_question = document.createElement('div')
|
||||
var question
|
||||
block_question.className = 'question-block'
|
||||
for (let _i = 0; _i < block['questions'].length; _i++) {
|
||||
question = block['questions'][_i]
|
||||
text = document.createElement('p')
|
||||
text.innerHTML = `<strong>Question ${question['q_no'] + 1}.</strong> ${question['text']}`
|
||||
block_question.append(text)
|
||||
question_body = document.createElement('div')
|
||||
question_body.className ='question-body'
|
||||
type = document.createElement('p')
|
||||
type.innerHTML = `<strong>Question Type:</strong> ${question['q_type']}`
|
||||
question_body.append(type)
|
||||
options = document.createElement('p')
|
||||
options.innerHTML = '<strong>Options:</strong>'
|
||||
option_list = document.createElement('ul')
|
||||
for (let __i = 0; __i < question['options'].length; __i++) {
|
||||
option = document.createElement('li')
|
||||
option.innerHTML = question['options'][__i]
|
||||
if (question['correct'] == __i) {
|
||||
option.innerHTML += ' <span class="badge rounded-pill bg-success">Correct</span>'
|
||||
}
|
||||
option_list.append(option)
|
||||
}
|
||||
options.append(option_list)
|
||||
question_body.append(options)
|
||||
tags = document.createElement('p')
|
||||
tags.innerHTML = `<strong>Tags:</strong>`
|
||||
tag_list = document.createElement('ul')
|
||||
for (let __i = 0; __i < question['tags'].length; __i++) {
|
||||
tag = document.createElement('li')
|
||||
tag.innerHTML = question['tags'][__i]
|
||||
tag_list.append(tag)
|
||||
}
|
||||
tags.append(tag_list)
|
||||
question_body.append(tags)
|
||||
block_question.append(question_body)
|
||||
obj.append(block_question)
|
||||
}
|
||||
}
|
||||
$viewer_panel.append(obj)
|
||||
}
|
||||
}
|
||||
@ -77,10 +77,13 @@
|
||||
<a href="{{ url_for('admin._users') }}" id="link-users" class="dropdown-item">Users</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('admin._questions') }}" id="link-questions" class="dropdown-item">Question Datasets</a>
|
||||
<a href="{{ url_for('admin._questions') }}" id="link-questions" class="dropdown-item">Manage Questions</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('editor._editor') }}" id="link-editor" class="dropdown-item">Question Editor</a>
|
||||
<a href="{{ url_for('view._view') }}" id="link-editor" class="dropdown-item">View Questions</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('editor._editor') }}" id="link-editor" class="dropdown-item">Edit Questions</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -11,11 +11,12 @@
|
||||
<h1>Editor</h1>
|
||||
<div class="container">
|
||||
<p class="lead">
|
||||
Use this console to edit the questions in this dataset. For more information on using the editor console, click on the the blue information button.
|
||||
Use this console to edit the questions in this dataset. For more information on using the editor console, click on the the blue Information button. To preview the questions in the current dataset, click on the green View Questions button.
|
||||
</p>
|
||||
</div>
|
||||
<div class="container control-panel">
|
||||
<button class="btn btn-primary" aria-title="Infrmation" title="Information"><i class="bi bi-info-circle-fill"></i></button>
|
||||
<button class="btn btn-primary" aria-title="Information" title="Information" data-action="info"><i class="bi bi-info-circle-fill"></i></button>
|
||||
<button class="btn btn-success" aria-title="View Questions" title="View Questions" data-action="view"><i class="bi bi-book-fill"></i></button>
|
||||
</div>
|
||||
<div class="container info-panel">
|
||||
<h3>
|
||||
@ -77,9 +78,11 @@
|
||||
In order to show how many questions are remaining inside a block, e.g. to say ‘the next n questions are about a specific scenario’, use the placeholder <code><block_remaining_questions></code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="container viewer-panel">
|
||||
</div>
|
||||
<div class="container editor-panel">
|
||||
<h3>
|
||||
Edit Dataset
|
||||
Edit Questions
|
||||
</h3>
|
||||
<div class="container dataset-metadata">
|
||||
<div class="input-group mb-3">
|
||||
@ -98,7 +101,7 @@
|
||||
<span class="input-group-text">Last Updated</span>
|
||||
<span class="form-control">
|
||||
{{ dataset.date.strftime('%d %b %Y %H:%M') }}
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">
|
||||
|
||||
Reference in New Issue
Block a user