client/components/Tooltip.jsx

+import React from 'react'
+
+const Tooltip = (props) => {
+  if (!props.text) {
+    return null
+  }
+
+  const tooltipIcon = props.icon || 'comment'
+
+  const tooltipLocation = props.location || 'right'
+
+  const isButton = props.button || false
+
+  let tooltipClass = isButton ? 'button is-light is-small' : 'icon tooltip'
+  tooltipClass += ' has-tooltip-' + tooltipLocation
+  if (props.text.length > 60) {
+    tooltipClass += ' has-tooltip-multiline'
+  }
+
+  return (
+    <span
+      className={tooltipClass}
+      data-tooltip={props.text}
+      onClick={props.clickAction}
+    >
+      <i className={'fa fa-' + tooltipIcon} />
+    </span>
+  )
+}
+
+export default Tooltip

client/components/feedback/Feedback.scss

+@import "bulma/bulma";
+
+.panel-block.attach-bottom {
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.control.is-score-control {
+    width: 3rem;
+    margin-right: 0;
+}
+
+.control.is-score-control > .input {
+    text-align: center;
+    padding-left: 0.1rem;
+    padding-right: 0.1rem;
+}
+
+.panel-block.feedback-item {
+    display: grid;
+    border-top: hidden;
+    border-left: hidden;
+    border-right: hidden;
+    min-height: 48px;
+    max-width: 100%;
+    grid-template-columns: 1.5rem 1fr auto;
+    border-radius: 2px;
+    align-items: end;
+}
+
+.add-box-shadow {
+  box-shadow: whitesmoke 0 0 0.15rem 0.15rem;
+}
+
+.edit-container {
+  display: none;
+  grid-column: 3;
+  grid-row: 1;
+  z-index: 8;
+
+  @extend .add-box-shadow;
+}
+
+.filter-container {
+  display: block;
+  grid-column: 4;
+  grid-row: 1;
+  z-index: 8;
+
+  @extend .is-small;
+  @extend .is-light;
+  @extend .add-box-shadow;
+
+  &:hover {
+    @extend .is-link;
+  }
+
+  &.no-filter {
+    // @extend .is-inverted;
+    display: none;
+  }
+}
+
+.panel-block.feedback-item:hover {
+
+  .filter-container {
+    display: block;
+  }
+
+  .edit-container {
+    display: flex;
+  }
+}
+
+.is-edit {
+  @extend .is-small;
+  @extend .is-light;
+
+  &:hover {
+    @extend .is-link;
+  }
+}
+
+.is-filter {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 4em;
+  height: 4em;
+  transform: translateY(-25%);
+}
+
+.is-score {
+  width: 1.5rem;
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+}
+
+.grow {
+    flex-grow: 1 !important;
+}
+
+.no-grow {
+    flex-grow: 0 !important;
+}
+
+.flex-space-between {
+    display: flex;
+    justify-content: space-between;
+}
+
+.is-fullwidth {
+    width: 100%;
+}
+
+.text-container {
+    display: block;
+    justify-content: flex-start;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: normal;
+    grid-column: 2 / 999;
+    grid-row: 1;
+    min-width: 100%;
+    max-width: 100%;
+    padding-left: 0.5em;
+}
+
+/*
+    Quick fix for removing 1px spacing between arrow and tooltip, should not be necessary.
+    TODO: Find out why this happens
+*/
+[data-tooltip].tag.has-tooltip-left.has-tooltip-arrow::after {
+    left: -1px !important;
+}
+
+/* Remove the dashed bottom border introduced by span tags */
+span.tag {
+  border-style: solid;
+  border-width: 0.5px;
+}

client/components/feedback/FeedbackBlock.jsx

+import React from 'react'
+
+import Tooltip from '../Tooltip.jsx'
+import { FILTER_COLORS, FILTER_ICONS, FeedbackList } from './FeedbackUtils.jsx'
+
+class FeedbackBlock extends React.Component {
+  toggle = () => this.props.toggleOption(this.props.feedback.id)
+
+  editFeedback = (e) => {
+    e.stopPropagation()
+    this.props.editFeedback()
+  }
+
+  render () {
+    const shortcut = (this.props.feedback.index < 11 ? '' : 'shift + ') + this.props.feedback.index % 10
+
+    return (
+      <li>
+        <a
+          className={'panel-block feedback-item' + (this.props.feedback.highlight ? ' is-active' : '')}
+          onClick={this.props.grading ? this.toggle : this.props.editFeedback}
+        >
+          <span
+            className={'tag is-score has-tooltip-left has-tooltip-arrow' +
+              (this.props.exclusive ? ' is-circular' : ' is-squared') +
+              (this.props.checked ? (this.props.valid ? ' is-link' : ' is-danger') : '') +
+              ((this.props.showIndex && this.props.feedback.index <= 20)
+                ? ' has-tooltip-active'
+                : '')}
+            data-tooltip={shortcut}>
+            {this.props.feedback.score}
+          </span>
+          <span className='text-container'>
+            {this.props.feedback.name}
+          </span>
+          <div className='edit-container'>
+            <Tooltip button text={this.props.feedback.description} location='top' />
+            <button
+              className={'button is-edit is-pulled-right'}
+              onClick={this.editFeedback}
+            >
+              <i className='fa fa-pen' />
+            </button>
+          </div>
+          {this.props.grading &&
+            <div
+              className={
+                // TODO: Change to is-popover-right once Firefox supports :has()
+                `popover is-popover-top button is-pulled-right filter-container
+                ${(this.props.filterMode === 'no_filter' ? ' no-filter' : '')}
+                ${FILTER_COLORS[this.props.filterMode]}`}
+            >
+              <i className={`fa ${FILTER_ICONS[this.props.filterMode]}`} />
+              <div className='is-filter'
+                onClick={e => this.props.applyFilter(e, 'no_filter')}
+              />
+              <div className='popover-content' style={{ display: 'grid', gridAutoFlow: 'column', gap: '1em' }}>
+                <button
+                  className={
+                    `button popover-trigger is-inverted is-small fa ${FILTER_ICONS.required} ${FILTER_COLORS.required}`}
+                  onClick={e => this.props.applyFilter(e, 'required')}
+                />
+                <button
+                  className={
+                    `button popover-trigger is-inverted is-small fa ${FILTER_ICONS.excluded} ${FILTER_COLORS.excluded}`}
+                  onClick={(e) => this.props.applyFilter(e, 'excluded')}
+                />
+              </div>
+            </div>
+          }
+        </a>
+        <FeedbackList {...this.props.parentProps} feedback={this.props.feedback} />
+      </li>
+    )
+  }
+}
+
+export default FeedbackBlock

client/components/feedback/FeedbackBlockEdit.jsx

+import React from 'react'
+
+import ConfirmationModal from '../modals/ConfirmationModal.jsx'
+import ColorInput from '../ColorInput.jsx'
+import Switch from '../Switch.jsx'
+import * as api from '../../api.jsx'
+import { toast } from 'bulma-toast'
+
+import { FeedbackList, HasModalContext } from './FeedbackUtils.jsx'
+
+const CancelButton = (props) => (
+  <button className='button is-light tooltip' onClick={props.onClick} data-tooltip='Cancel'>
+    <span className='icon is-small'>
+      <i className='fa fa-times' />
+    </span>
+  </button>
+)
+
+const SaveButton = (props) => (
+  <button className='button is-link tooltip' disabled={props.disabled} onClick={props.onClick}
+    data-tooltip={props.exists ? 'Save' : 'Add'}>
+    <span className='icon is-small'>
+      <i className='fa fa-save' />
+    </span>
+  </button>
+)
+
+const DeleteButton = (props) => (
+  <button className='button is-danger tooltip'
+    style={{ marginLeft: 'auto' }} disabled={!props.disabled} onClick={props.onClick} data-tooltip='Delete'>
+    <span className='icon is-small'>
+      <i className='fa fa-trash' />
+    </span>
+  </button>
+)
+
+class EditPanel extends React.Component {
+  state = {
+    id: null,
+    name: '',
+    description: '',
+    score: '',
+    exclusive: false,
+    deleting: false
+  }
+
+  static contextType = HasModalContext
+
+  static getDerivedStateFromProps (nextProps, prevState) {
+    // In case nothing is set, use an empty function that no-ops
+    const updateCallback = nextProps.updateFeedback || (_ => {})
+    if (nextProps.feedback && prevState.id !== nextProps.feedback.id) {
+      const fb = nextProps.feedback
+      return {
+        id: fb.id,
+        name: fb.name,
+        description: fb.description === null ? '' : fb.description,
+        score: fb.score,
+        exclusive: nextProps.indexedFeedback[fb.parent].exclusive,
+        updateCallback
+      }
+    }
+    return { updateCallback }
+  }
+
+  changeText = (event) => {
+    this.setState({
+      [event.target.name]: event.target.value
+    })
+  }
+
+  changeScore = (event) => {
+    const patt = /^(-|(-?[1-9]\d*)|0)?$/
+
+    if (patt.test(event.target.value)) {
+      this.setState({
+        score: event.target.value
+      })
+    }
+  }
+
+  key = (event) => {
+    if (!event.shiftKey && event.keyCode === 13 && this.state.name.length) {
+      this.saveFeedback()
+    }
+  }
+
+  saveFeedback = () => {
+    const uri = 'feedback/' + this.props.problemID
+    const fb = {
+      name: this.state.name,
+      description: this.state.description,
+      score: this.state.score
+    }
+
+    if (this.state.id) {
+      Promise.all([
+        api.patch(uri + `/${this.state.id}`, fb),
+        (this.state.exclusive !== this.props.parentExclusive
+          ? api.patch(uri + `/${this.props.parentId}`, { exclusive: this.state.exclusive })
+          : Promise.resolve({ set_aside_solutions: 0 }))
+      ])
+        .then(([r1, r2]) => {
+          this.state.updateCallback()
+          this.props.goBack()
+
+          if (r2.set_aside_solutions > 0) {
+            toast({
+              message: `${r2.set_aside_solutions} solution${r2.set_aside_solutions > 1 ? 's have' : ' has'} ` +
+                'been marked as ungraded due to incompatible feedback options.',
+              type: 'is-warning',
+              duration: 5000
+            })
+          }
+        })
+        .catch(console.error)
+    } else {
+      fb.parentId = this.props.parentId
+      api.post(uri, fb)
+        .then((response) => {
+          // Response is the feedback option
+          this.state.updateCallback()
+          this.setState({
+            id: null,
+            name: '',
+            description: '',
+            score: '',
+            parent: null,
+            exclusive: false
+          })
+        })
+        .catch(console.error)
+    }
+  }
+
+  deleteFeedback = () => {
+    if (this.state.id) {
+      api.del('feedback/' + this.props.problemID + '/' + this.state.id)
+        .then(() => {
+          this.state.updateCallback()
+          this.props.goBack()
+        })
+        .catch(err => {
+          toast({
+            message: 'Could not delete feedback' + (err.message ? ': ' + err.message : ''),
+            type: 'is-danger'
+          })
+          // update to try and get a consistent state
+          this.state.updateCallback()
+          this.props.goBack()
+        })
+    }
+  }
+
+  render () {
+    return (
+      <HasModalContext.Consumer>{updateHasModal => (
+        <React.Fragment>
+        {this.props.parent && <div className='panel-block attach-bottom'>
+          {this.props.parent.parent === null
+            ? <div>Add on top-level</div>
+            : <div><b>Parent feedback:</b> {this.props.parent.name}</div>}
+        </div>}
+        <div className={this.props.parent !== null ? 'panel-block attach-bottom' : ''}>
+          <div className='field-body'>
+            <div className='field no-grow'>
+              <p className='label'>Score</p>
+              <div className='control is-score-control'>
+                <ColorInput
+                  placeholder='7'
+                  value={this.state.score}
+                  onChange={this.changeScore}
+                  onKeyDown={this.key}
+                />
+              </div>
+            </div>
+            <div className='field grow'>
+              <p className='label'>Name</p>
+              <div className='control'>
+                <ColorInput
+                  placeholder='e.g. Correct solution'
+                  name='name'
+                  value={this.state.name}
+                  onChange={this.changeText}
+                  onKeyDown={this.key}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={this.props.parent !== null ? 'panel-block attach-bottom' : ''}>
+          <div className='field is-fullwidth'>
+            <label className='label'>Description</label>
+            <div className='control has-icons-left'>
+              <textarea
+                className='input'
+                style={{ height: '4rem' }}
+                placeholder='Description'
+                name='description'
+                value={this.state.description}
+                onChange={this.changeText}
+                onKeyDown={this.key}
+              />
+              <span className='icon is-small is-left'>
+                <i className='fa fa-comment' />
+              </span>
+            </div>
+          </div>
+        </div>
+        {this.state.id &&
+          <div className={this.props.parent !== null ? 'panel-block attach-bottom' : ''}>
+            <div className='field is-grouped is-fullwidth'>
+              <p className='control is-expanded'>
+                <label className='label'>Exclusive</label>
+              </p>
+              <Switch
+                color='link'
+                value={this.state.exclusive}
+                onChange={() => this.setState({ exclusive: !this.state.exclusive })}
+              />
+            </div>
+          </div>
+        }
+        <div className={this.props.parent !== null ? 'panel-block' : ''}>
+          <div className='flex-space-between is-fullwidth'>
+            <div className='buttons is-marginless'>
+              <SaveButton onClick={this.saveFeedback} exists={this.props.feedback}
+                disabled={!this.state.name ||
+                  (!this.state.score && this.state.score !== 0) ||
+                  isNaN(parseInt(this.state.score))} />
+              <CancelButton onClick={this.props.goBack} />
+            </div>
+            <DeleteButton
+              onClick={() => { this.setState({ deleting: true }, () => updateHasModal(true)) }}
+              disabled={this.props.feedback} />
+          </div>
+          <ConfirmationModal
+            headerText={`Do you want to irreversibly delete feedback option "${this.state.name}"?`}
+            contentText={this.props.feedback && (this.props.feedback.used || this.props.feedback.children != null)
+              ? (this.props.feedback.children.length > 0
+                  ? 'This feedback has ' + (this.props.feedback.children.length > 1
+                    ? `${this.props.feedback.children.length} children`
+                    : ' 1 child') +
+              ', that would also be deleted in the process. '
+                  : '') +
+                (this.props.feedback.used
+                  ? 'This feedback option was assigned to ' +
+                  (this.props.feedback.used > 1 ? `${this.props.feedback.used} solutions` : ' 1 solution') +
+                  ' and it will be removed. This will affect the final grade assigned to each submission.'
+                  : '')
+              : 'This feedback option is not used and has no children, you can safely delete it.'
+            }
+            color='is-danger'
+            confirmText='Delete feedback'
+            active={this.state.deleting}
+            onConfirm={this.deleteFeedback}
+            onCancel={() => { this.setState({ deleting: false }, () => updateHasModal(false)) }}
+          />
+        </div>
+        {this.props.feedback && <FeedbackList {...this.props.parentProps} feedback={this.props.feedback} />}
+      </React.Fragment>
+      )}
+      </HasModalContext.Consumer>
+    )
+  }
+}
+
+export default EditPanel

client/components/feedback/FeedbackMenu.jsx

+import React from 'react'
+
+import withShortcuts from '../ShortcutBinder.jsx'
+import FeedbackBlockEdit from './FeedbackBlockEdit.jsx'
+import { indexFeedbackOptions, findFeedbackByIndex, FeedbackList } from './FeedbackUtils.jsx'
+
+import './Feedback.scss'
+
+class FeedbackMenu extends React.Component {
+  feedbackBlock = React.createRef()
+
+  state = {
+    selectedFeedback: null,
+    feedbackToEditId: -1,
+    parentId: -1,
+    indexedFeedback: null,
+    problemID: -1
+  }
+
+  componentDidMount = () => {
+    if (this.props.grading) {
+      this.props.bindShortcut(['up', 'k'], (event) => {
+        event.preventDefault()
+        this.navigateOptions(-1)
+      })
+      this.props.bindShortcut(['down', 'j'], (event) => {
+        event.preventDefault()
+        this.navigateOptions(1)
+      })
+      this.props.bindShortcut(['space'], (event) => {
+        event.preventDefault()
+        this.toggleSelectedOption()
+      })
+    }
+  }
+
+  static getDerivedStateFromProps (nextProps, prevState) {
+    const indexedFeedback = indexFeedbackOptions(nextProps.problem.feedback, nextProps.problem.root_feedback_id)
+
+    if (prevState.problemID !== nextProps.problem.id) {
+      return {
+        indexedFeedback,
+        selectedFeedback: null,
+        feedbackToEditId: 0,
+        parentId: -1,
+        problemID: nextProps.problem.id
+      }
+    }
+
+    return {
+      indexedFeedback
+    }
+  }
+
+  /**
+   * Enter the feedback editing view for a feedback option.
+   * Pass a null or negative id to stop editing.
+   * @param feedbackId the id of the feedback to edit.
+   * @param parent the parent feedback option, if any
+   */
+  editFeedback = (feedbackId, parentId) => {
+    this.setState({
+      feedbackToEditId: feedbackId,
+      parentId
+    })
+  }
+
+  setOptionIndex = (newIndex) => {
+    const length = Object.keys(this.props.problem.feedback).length
+    if (length === 0) return
+
+    newIndex = ((newIndex % length) + length) % length
+    this.setState({
+      selectedFeedback: findFeedbackByIndex(this.state.indexedFeedback, newIndex)
+    })
+  }
+
+  navigateOptions = (direction) => {
+    const index = this.state.selectedFeedback !== null ? this.state.selectedFeedback.index : 0
+    this.setOptionIndex(index + direction)
+  }
+
+  toggleSelectedOption = () => {
+    if (this.feedbackBlock.current) {
+      this.feedbackBlock.current.toggle()
+    }
+  }
+
+  render () {
+    const rootFO = this.state.indexedFeedback[this.props.problem.root_feedback_id]
+
+    return (
+      <React.Fragment>
+        <div className='panel-block' style={{ display: 'block' }}>
+          <div className='menu'>
+            {<FeedbackList
+              feedback={rootFO}
+              indexedFeedback={this.state.indexedFeedback}
+              selectedFeedbackId={this.state.selectedFeedback && this.state.selectedFeedback.id}
+              editFeedback={this.editFeedback}
+              problemID={this.props.problem.id}
+              updateFeedback={this.props.updateFeedback}
+              feedbackToEditId={this.state.feedbackToEditId}
+              grading={this.props.grading}
+              // only necessary when grading
+              checkedFeedback={this.props.grading && this.props.solution.feedback}
+              toggleOption={this.props.toggleOption}
+              showTooltips={this.props.showTooltips}
+              feedbackFilters={this.props.feedbackFilters}
+              applyFilter={this.props.applyFilter}
+              blockRef={this.feedbackBlock}
+              />
+            }
+          </div>
+        </div>
+        {this.state.feedbackToEditId === -1
+          ? <FeedbackBlockEdit
+            feedback={null}
+            parentId={this.state.parentId}
+            problemID={this.props.problem.id}
+            goBack={() => this.editFeedback(0, -1)}
+            updateFeedback={this.props.updateFeedback} />
+          : <div className='panel-block'>
+            <button
+              className='button is-link is-outlined is-fullwidth'
+              onClick={() => this.editFeedback(-1, this.props.problem.root_feedback_id)}>
+              <span className='icon is-small'>
+                <i className='fa fa-plus' />
+              </span>
+              <span>option</span>
+            </button>
+            {this.props.problem.mc_options.length === 0 && Object.keys(this.state.indexedFeedback).length > 1 &&
+              <div className='dropdown is-hoverable is-right is-up'>
+                <div className='dropdown-trigger' />
+                <button className='button is-link is-outlined' aria-controls='dropdown-menu-FO-parent'>
+                  <span className='icon is-small'>
+                    <i className='fa fa-chevron-down' />
+                  </span>
+                </button>
+                <div className='dropdown-menu is-fullwidth' id='dropdown-menu-FO-parent' role='menu'>
+                  <div className='dropdown-content'>
+                    <div className='dropdown-item'>
+                      <p><b>Parent feedback:</b></p>
+                    </div>
+                    {Object.values(this.state.indexedFeedback)
+                      // id and root_feedback_id have different types so type check comparison (!==) does not work
+                      .filter(fb => fb.id != this.props.problem.root_feedback_id) // eslint-disable-line eqeqeq
+                      .sort((fb1, fb2) => fb1.index - fb2.index)
+                      .map((fb, index) =>
+                        <a key={'dropdown-parent-' + index}
+                          className='dropdown-item has-text-overflow'
+                          onClick={() => this.editFeedback(-1, fb.id)}>
+                          {this.state.indexedFeedback[fb.id].name}
+                        </a>
+                      )}
+                  </div>
+                </div>
+              </div>}
+          </div>
+        }
+      </React.Fragment>
+    )
+  }
+}
+export default withShortcuts(FeedbackMenu)

client/components/feedback/FeedbackPanel.jsx

+import React from 'react'
+
+import { toast } from 'bulma-toast'
+
+import * as api from '../../api.jsx'
+
+import withShortcuts from '../ShortcutBinder.jsx'
+
+import FeedbackMenu from './FeedbackMenu.jsx'
+
+import './Feedback.scss'
+
+class FeedbackPanel extends React.Component {
+  state = {
+    remark: '',
+    // Have to keep submissionID and problemID in state,
+    // to be able to decide when to derive remark from properties.
+    submissionID: null,
+    problemID: null
+  }
+
+  static getDerivedStateFromProps (nextProps, prevState) {
+    if (prevState.problemID !== nextProps.problem.id || prevState.submissionID !== nextProps.submissionID) {
+      return {
+        remark: nextProps.solution.remark,
+        submissionID: nextProps.submissionID,
+        problemID: nextProps.problem.id
+      }
+    }
+
+    return null
+  }
+
+  saveRemark = () => {
+    if (!this.props.solution.gradedAt && this.state.remark.replace(/\s/g, '').length === 0) return
+    api.post('solution/' + this.props.examID + '/' + this.props.submissionID + '/' + this.props.problem.id, {
+      remark: this.state.remark
+    }).then(success => {
+      this.props.setSubmission(this.props.submissionID)
+      if (!success) toast({ message: 'Remark not saved!', type: 'is-danger' })
+    })
+  }
+
+  changeRemark = (event) => {
+    this.setState({
+      remark: event.target.value
+    })
+  }
+
+  /**
+   * Blurs the remark box when pressing escape or enter (shift+enter preserves newlines)
+   * @param event the event
+   */
+  keyMap = (event) => {
+    if (event.keyCode === 27 || (event.keyCode === 13 && !event.shiftKey)) {
+      event.preventDefault()
+      event.target.blur()
+    }
+  }
+
+  render () {
+    const solution = this.props.solution
+    let totalScore = 0
+    for (let i = 0; i < solution.feedback.length; i++) {
+      totalScore += this.props.problem.feedback[solution.feedback[i]].score
+    }
+
+    return (
+      <>
+        <div className='panel-heading level' style={{ marginBottom: 0 }}>
+          <div className='level-left'>
+            {solution.feedback.length !== 0 && <p>Total:&nbsp;<b>{totalScore}</b></p>}
+          </div>
+          <div className='level-right'>
+            <div
+              className={'has-tooltip-arrow' + (this.props.showTooltips ? ' has-tooltip-active' : '')}
+              data-tooltip='approve/set aside feedback: a'
+            >
+              <button
+                title={
+                  solution.feedback.length === 0
+                    ? 'At least one feedback option must be selected'
+                    : (solution.valid ? '' : 'Several exclusive options are checked at the same time.')
+                }
+                className={'button ' + (solution.valid ? 'is-info' : 'is-danger')}
+                disabled={solution.feedback.length === 0 || !solution.valid}
+                onClick={this.props.toggleApprove}
+              >
+                {solution.gradedBy === null ? 'Approve' : 'Set aside'}
+              </button>
+            </div>
+          </div>
+        </div>
+        <FeedbackMenu {...this.props} grading />
+        <div className='panel-block'>
+          <textarea
+            className='textarea'
+            rows='2'
+            placeholder='Remark'
+            value={this.state.remark}
+            onBlur={this.saveRemark}
+            onChange={this.changeRemark}
+            onKeyDown={this.keyMap} />
+        </div>
+      </>
+    )
+  }
+}
+export default withShortcuts(FeedbackPanel)

client/components/feedback/FeedbackUtils.jsx

+import React from 'react'
+
+import FeedbackBlock from './FeedbackBlock.jsx'
+import FeedbackBlockEdit from './FeedbackBlockEdit.jsx'
+
+const FILTER_ICONS = {
+  no_filter: 'fa-filter',
+  required: 'fa-plus',
+  excluded: 'fa-minus'
+}
+
+const FILTER_COLORS = {
+  no_filter: '',
+  required: 'is-success',
+  excluded: 'is-danger'
+}
+
+/**
+ * Adds indexes based on pre-order sorting.
+ * @param root the root FO of the problem
+ * @returns {*} the root FO now with index
+ */
+export const indexFeedbackOptions = (feedback, rootId) => {
+  let index = 0
+  const idStack = [rootId]
+  while (idStack.length > 0) {
+    const id = idStack.shift()
+    feedback[id].index = index++
+    idStack.unshift(...feedback[id].children)
+  }
+  return feedback
+}
+
+/**
+ * Finds the FO that matches the given index (used for shortcuts)
+ * @param feedback the list of indexed feedback options.
+ * @param index the index to match
+ * @returns {null|*} return null if no match, or else the matching FO
+ */
+export const findFeedbackByIndex = (feedback, index) => {
+  return Object.values(feedback).find(fb => fb.index === index)
+}
+
+// Used to add .has-modal class when children have a modal displayed
+// TODO: Remove this once :has() is supported by Firefox
+export const HasModalContext = React.createContext({ updateHasModal: () => {} })
+
+const FeedbackList = (props) => {
+  if (!props.feedback.children.length) return null
+
+  const hasValidFeedback = !(props.grading && props.feedback.exclusive && props.feedback.children.reduce(
+    (prev, fb) => props.checkedFeedback.includes(fb) ? prev + 1 : prev, 0) > 1)
+
+  const children = props.feedback.children.map((id) =>
+    <FeedbackItem
+      feedbackID={id}
+      key={'item-' + id}
+      indexedFeedback={props.indexedFeedback}
+      selectedFeedbackId={props.selectedFeedbackId}
+      editFeedback={props.editFeedback}
+      problemID={props.problemID}
+      updateFeedback={props.updateFeedback}
+      feedbackToEditId={props.feedbackToEditId}
+      grading={props.grading}
+      exclusive={props.feedback.exclusive}
+      // only necessary when grading
+      checkedFeedback={props.checkedFeedback}
+      valid={hasValidFeedback}
+      toggleOption={props.toggleOption}
+      showTooltips={props.showTooltips}
+      feedbackFilters={props.feedbackFilters}
+      applyFilter={props.applyFilter}
+      blockRef={props.feedbackBlock} />
+  )
+
+  return <ul className='menu-list' style={{ marginRight: '0px' }}>{children}</ul>
+}
+
+const FeedbackItem = (props) => {
+  const feedbackID = props.feedbackID
+
+  return feedbackID !== props.feedbackToEditId
+    ? <FeedbackBlock
+      ref={props.selectedFeedbackId === feedbackID ? props.blockRef : null}
+      key={'item-' + feedbackID}
+      feedback={props.indexedFeedback[feedbackID]}
+      indexedFeedback={props.indexedFeedback}
+      checked={props.grading && props.checkedFeedback.includes(feedbackID)}
+      editFeedback={() => props.editFeedback(feedbackID, -1)}
+      toggleOption={props.toggleOption}
+      grading={props.grading}
+      selected={props.selectedFeedbackId === feedbackID || props.indexedFeedback[feedbackID].highlight}
+      showIndex={props.showTooltips}
+      filterMode={(props.grading && props.feedbackFilters[feedbackID]) || 'no_filter'}
+      applyFilter={(e, newFilterMode) => props.applyFilter(e, feedbackID, newFilterMode)}
+      exclusive={props.exclusive}
+      valid={props.valid}
+      parentProps={props} />
+    : <FeedbackBlockEdit
+      key={'item-' + feedbackID}
+      feedback={props.indexedFeedback[feedbackID]}
+      parentId={props.indexedFeedback[feedbackID].parent}
+      indexedFeedback={props.indexedFeedback}
+      problemID={props.problemID}
+      goBack={() => props.editFeedback(0, -1)}
+      updateFeedback={props.updateFeedback}
+      parentProps={props} />
+}
+
+export { FILTER_COLORS, FILTER_ICONS, FeedbackList }

client/components/help/GradingPolicyHelp.md

+Zesje automatically grades blank answers and multiple choice questions
+by applying appropriate feedback options. With auto-approve, these
+selected feedback options can be approved automatically. Auto-approve
+supports three different strategies:
+
+- **Nothing**: Do not approve anything
+- **Blanks**: Approve blank answers
+- **≤1 answer**: Approve multiple choice questions with only one selected option or blanks

client/components/help/ShortcutsHelp.md

@@ -3,7 +3,7 @@ All the available shortcuts are listed below, grouped by page.
 ### Grade
 
 | Shortcut             | Action                 |
-|----------------------|------------------------|
+| -------------------- | ---------------------- |
 | `ctrl`               | Show shortcuts         |
 | `↑` and `↓`          | Select option          |
 | `space`              | Toggle selected option |
@@ -11,10 +11,12 @@ All the available shortcuts are listed below, grouped by page.
 | `shift` + `1 - 9, 0` | Toggle option 11-20    |
 | `shift` + `↑`        | Previous problem       |
 | `shift` + `↓`        | Next problem           |
+| `shift` + `←`        | First submission       |
+| `shift` + `→`        | Last submission        |
 | `←`                  | Previous submission    |
 | `→`                  | Next submission        |
-| `shift` + `←`        | Previous ungraded      |
-| `shift` + `→`        | Next ungraded          |
+| `a`                  | Approve/Set aside feedback |
+| `f`                  | Toggle full page       |
 
 ### Students
 

client/components/ConfirmationButton.jsx → client/components/modals/ConfirmationButton.jsx

@@ -9,7 +9,7 @@ class ConfirmationButton extends React.Component {
 
   render () {
     return (
-      <React.Fragment>
+      <>
         <button
           className={this.props.className}
           disabled={this.props.disabled}
@@ -30,7 +30,7 @@ class ConfirmationButton extends React.Component {
             }, () => this.props.onConfirm())
           }}
         />
-      </React.Fragment>
+      </>
     )
   }
 }

client/components/ConfirmationModal.jsx → client/components/modals/ConfirmationModal.jsx

@@ -5,10 +5,11 @@ import './Modal.css'
 const ConfirmationModal = (props) => {
   let body = null
   if (props.contentText) {
-    body =
+    body = (
       <section className='modal-card-body'>
-        { props.contentText}
+        {props.contentText}
       </section>
+    )
   }
 
   return (
@@ -21,8 +22,10 @@ const ConfirmationModal = (props) => {
         {body}
         <footer className='modal-card-footer'>
           <div className='field is-grouped'>
-            <button className={'button is-fullwidth is-footer is-left ' +
-              (props.color || 'is-success')} onClick={props.onConfirm}>
+            <button
+              className={'button is-fullwidth is-footer is-left ' +
+              (props.color || 'is-success')} onClick={props.onConfirm}
+            >
               {props.confirmText || 'Save changes'}
             </button>
             <button className='button is-fullwidth is-footer is-right' onClick={props.onCancel}>
@@ -31,7 +34,7 @@ const ConfirmationModal = (props) => {
           </div>
         </footer>
       </div>
-      <button className='modal-close is-large' aria-label='close' />
+      <button className='modal-close is-large' aria-label='close' onClick={props.onCancel} />
     </div>
   )
 }

client/components/help/HelpModal.jsx → client/components/modals/HelpModal.jsx

 import React from 'react'
 
-import './../Modal.css'
+import './Modal.css'
+import shortcutsMarkdown from '../help/ShortcutsHelp.md'
+import gradingPolicyMarkdown from '../help/GradingPolicyHelp.md'
 
 const HelpModal = (props) => (
   <div className={'modal ' + (props.page.title ? 'is-active' : '')}>
@@ -12,9 +14,12 @@ const HelpModal = (props) => (
         </p>
       </header>
       <section className='modal-card-body'>
-        <div className='content'
+        <div
+          className='content'
           dangerouslySetInnerHTML={
-            {__html: (props.page.content)}} />
+            { __html: (props.page.content) }
+          }
+        />
       </section>
       <footer className='modal-card-footer'>
         <div className='field is-grouped'>
@@ -28,4 +33,9 @@ const HelpModal = (props) => (
   </div>
 )
 
+export const HELP_PAGES = {
+  shortcuts: { title: 'Shortcuts', content: shortcutsMarkdown },
+  gradingPolicy: { title: 'Auto-approve', content: gradingPolicyMarkdown }
+}
+
 export default HelpModal

client/components/modals/ProgressModal.jsx

+import React from 'react'
+
+import './Modal.css'
+import Spinner from '../Spinner.jsx'
+
+const ProgressModal = ({
+  active = false,
+  headerText = 'Loading...',
+  onCancel = null
+}) => {
+  return (
+    <div className={'modal ' + (active ? 'is-active' : '')}>
+      <div className='modal-background' onClick={onCancel} />
+      <div className='modal-card'>
+        <header className='modal-card-head'>
+          <p className='modal-card-title  '>{headerText}</p>
+        </header>
+        <section className='modal-card-body'>
+          <Spinner />
+        </section>
+      </div>
+      {onCancel && <button className='modal-close is-large' aria-label='close' onClick={onCancel} />}
+    </div>
+  )
+}
+
+export default ProgressModal

client/index.jsx

+import 'regenerator-runtime/runtime'
+
 import React from 'react'
 import { render } from 'react-dom'
 import App from './App.jsx'
 
-var root = document.getElementById('root')
+import TimeAgo from 'javascript-time-ago'
+
+import en from 'javascript-time-ago/locale/en.json'
+
+TimeAgo.addDefaultLocale(en)
+
+const root = document.getElementById('root')
 if (root == null) {
   throw new Error('no pad element')
 } else {

client/sizeof_loader.js

+// Based on: https://github.com/boopathi/image-size-loader/issues/10#issue-237059548
+
+const sizeOf = require('image-size')
+
+module.exports = function (content) {
+  this.cacheable && this.cacheable()
+
+  const resourcePath = this.resourcePath
+  const image = sizeOf(content)
+  const bytes = this.fs.statSync(resourcePath).size
+
+  const name = resourcePath.slice(resourcePath.lastIndexOf('/') + 1)
+  this.emitFile(name, content)
+
+  return `
+    module.exports = {
+      src: "${name}",
+      width: ${JSON.stringify(image.width)},
+      height: ${JSON.stringify(image.height)},
+      type: ${JSON.stringify(image.type)},
+      bytes: ${JSON.stringify(bytes)},
+
+      toString: function() {
+        return "${name}";
+      }
+    };
+  `
+}
+
+module.exports.raw = true

client/views/AddExam.jsx

 import React from 'react'
+import withRouter from '../components/RouterBinder.jsx'
 import Dropzone from 'react-dropzone'
-import Notification from 'react-bulma-notification'
-import { Document, Page } from 'react-pdf/dist/entry.webpack'
+import { toast } from 'bulma-toast'
+import { Document, Page } from 'react-pdf/dist/esm/entry.webpack5'
 
 import * as api from '../api.jsx'
-import Hero from '../components/Hero.jsx'
-import DropzoneContent from '../components/DropzoneContent.jsx'
+
+const LAYOUTS = [
+  {
+    name: 'Templated',
+    value: 'templated',
+    acceptsPDF: true,
+    description: 'Upload a PDF, add student ID field and page markers, and distribute to students. ' +
+                 'Supports automated student identification, blank detection, and multiple choice questions.'
+  },
+  {
+    name: 'Unstructured',
+    value: 'unstructured',
+    acceptsPDF: false,
+    description: 'Upload any PDF or image files from students and grade (no automatic scan processing).'
+  }
+]
 
 class Exams extends React.Component {
   state = {
     pdf: null,
     previewPageCount: 0,
-    exam_name: ''
-  };
+    examName: '',
+    selectedLayout: LAYOUTS[0]
+  }
+
+  onChangeLayout = (event) => {
+    const newLayout = LAYOUTS[event.target.value]
+    if (!newLayout.acceptsPDF) {
+      this.setState({
+        selectedLayout: newLayout,
+        pdf: null,
+        previewPageCount: 0
+      })
+    } else {
+      this.setState({
+        selectedLayout: newLayout
+      })
+    }
+  }
 
   onDropPDF = (accepted, rejected) => {
     if (rejected.length > 0) {
-      Notification.error('Please upload a PDF.')
+      toast({ message: 'Please upload a valid PDF.', type: 'is-danger' })
       return
     }
 
@@ -29,102 +60,166 @@ class Exams extends React.Component {
     })
   }
 
-  changeInput = (name, regex) => {
-    return (event) => {
-      this.setState({
-        [name]: event.target.value
-      })
-    }
-  }
-
-  onUploadPDF = (event) => {
-    if (!this.state.exam_name) {
-      Notification.error('Please enter exam name.')
+  addExam = (event) => {
+    if (!this.state.examName) {
+      toast({ message: 'Please give a name to the exam.', type: 'is-danger' })
       return
     }
-    if (!this.state.pdf) {
-      Notification.error('Please upload a PDF.')
+    if (this.state.selectedLayout.acceptsPDF && !this.state.pdf) {
+      toast({ message: 'Please upload a PDF.', type: 'is-danger' })
       return
     }
+
     const data = new window.FormData()
-    data.append('pdf', this.state.pdf)
-    data.append('exam_name', this.state.exam_name)
+    data.append('exam_name', this.state.examName)
+    data.append('layout', this.state.selectedLayout.value)
+    if (this.state.selectedLayout.acceptsPDF) {
+      data.append('pdf', this.state.pdf)
+    }
     api.post('exams', data)
       .then(exam => {
         this.props.updateExamList()
-        this.props.changeURL('/exams/' + exam.id)
-      })
-      .catch(resp => {
-        resp.json().then(body => Notification.error(body.message))
-      })
+        this.props.router.navigate('/exams/' + exam.id)
+      }, err =>
+        toast({ message: err.message, type: 'is-danger' })
+      )
   }
 
   render () {
     const previewPages = Array.from({ length: this.state.previewPageCount }, (v, k) => k + 1).map(pageNum => {
-      return <div key={'preview_col_' + pageNum} className='column'>
-        <Page width={150} height={200} renderAnnotations={false} renderTextLayer={false} pageNumber={pageNum} />
-      </div>
+      return (
+        <div key={'preview_col_' + pageNum} className='column'>
+          <Page
+            width={150} height={200}
+            renderAnnotations={false} renderTextLayer={false}
+            pageNumber={pageNum}
+          />
+        </div>
+      )
     })
+
     return (
-      <div>
-
-        <Hero title='Add exam' subtitle='first step' />
-
-        <section className='section'>
-          <div className='container'>
-            {this.state.pdf != null ? (
-              <div className='column has-text-centered'>
-                <h3 className='title'>Preview the PDF</h3>
-                <h5 className='subtitle'>{previewPages.length > 1 ? 'The first ' + previewPages.length + ' pages are shown' : 'The first page is shown'}</h5>
-                <Document
-                  file={this.state.pdf}
-                  onLoadSuccess={this.onDocumentLoad}
-                >
-                  <div className='columns'>
-                    {previewPages}
-                  </div>
-                </Document>
+      <>
+            <div className='field is-horizontal'>
+              <div className='field-label'>
+                <label className='label'>Name</label>
               </div>
-            ) : (
-              <div className='column has-text-centered'>
-                <h3 className='title'>Upload new exam PDF</h3>
-                <h5 className='subtitle'>a preview will be shown</h5>
-                <Dropzone accept='.pdf, application/pdf'
-                  style={{}} activeStyle={{ borderStyle: 'dashed', width: 'fit-content', margin: 'auto' }}
-                  onDrop={this.onDropPDF}
-                  disablePreview
-                  multiple={false}
-                >
-                  <DropzoneContent />
-                </Dropzone>
+              <div className='field-body'>
+                <div className='field'>
+                  <div className='control'>
+                    <input
+                      className='input'
+                      placeholder='Exam name'
+                      value={this.state.examName}
+                      required
+                      onChange={(e) => this.setState({ examName: e.target.value })}
+                    />
+                  </div>
+                </div>
               </div>
-            )}
-
-            <div className='control'>
-              <input
-                className='input'
-                placeholder='Exam name'
-                value={this.state.exam_name}
-                required
-                onChange={this.changeInput('exam_name')} />
             </div>
-            <div className='control'>
-              <button
-                type='submit'
-                className='is-centered button is-info is-rounded'
-                onClick={this.onUploadPDF}
-              >
-                Upload
-              </button>
+
+            <div className='field is-horizontal'>
+              <div className='field-label'>
+                <label className='label'>Type</label>
+              </div>
+              <div className='field-body'>
+                <div className='field'>
+                  <div className='control'>
+                    <div className='select'>
+                      <select onChange={this.onChangeLayout}>
+                        {LAYOUTS.map((layout, index) => {
+                          return <option key={`key_${index}`} value={index}>{layout.name}</option>
+                        })}
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
 
-          </div>
+            {this.state.selectedLayout &&
+              <div className='field is-horizontal'>
+                <div className='field-label' />
 
-        </section>
+                <div className='field-body'>
+                  <div className='field'>
+                    <div className='control'>
+                      <p>{this.state.selectedLayout.description}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>}
 
-      </div >
+            {this.state.selectedLayout && this.state.selectedLayout.acceptsPDF &&
+              <div className='field is-horizontal'>
+                <div className='field-label'>
+                  <label className='label'>Upload PDF</label>
+                </div>
+                <div className='field-body'>
+                  <div className='field'>
+                    <Dropzone
+                      accept='.pdf, application/pdf'
+                      onDrop={this.onDropPDF}
+                      multiple={false}
+                    >
+                      {({ getRootProps, getInputProps }) => (
+                        <section className='container'>
+                          <div {...getRootProps({ className: 'dropzone' })}>
+                            <input {...getInputProps()} />
+                            <p>Drag &apos;n&apos; drop or click to select the exam file...</p>
+                          </div>
+                        </section>
+                      )}
+                    </Dropzone>
+                    <p className='help'>{this.state.pdf !== null ? this.state.pdf.name : ''}</p>
+                  </div>
+                </div>
+              </div>}
+
+            {this.state.pdf != null &&
+              <div className='field is-horizontal'>
+                <div className='field-label'>
+                  <label className='label'>Preview</label>
+                </div>
+                <div className='field-body'>
+                  <div className='field'>
+                    <Document
+                      file={this.state.pdf}
+                      onLoadSuccess={this.onDocumentLoad}
+                    >
+                      <div className='columns'>
+                        {previewPages}
+                      </div>
+                    </Document>
+                  </div>
+                </div>
+              </div>}
+
+            <div className='field is-horizontal'>
+              <div className='field-label' />
+
+              <div className='field-body'>
+                <div className='field'>
+                  <div className='control'>
+                    <button
+                      className='button is-info'
+                      onClick={this.addExam}
+                      disabled={!this.state.examName || (
+                        this.state.selectedLayout !== null &&
+                        this.state.selectedLayout.acceptsPDF &&
+                        this.state.pdf === null
+                      )}
+                    >
+                      Create Exam
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+      </>
     )
   }
 }
 
-export default Exams
+export default withRouter(Exams)

client/views/Email.jsx

 import React from 'react'
 
-import Hero from '../components/Hero.jsx'
+import Fail from './Fail.jsx'
 import * as api from '../api.jsx'
 
 import EmailControls from './email/EmailControls.jsx'
@@ -11,29 +11,41 @@ import TemplateEditor from './email/TemplateEditor.jsx'
 class Email extends React.Component {
   state = {
     template: null,
-    selectedStudent: null
+    selectedStudent: null,
+    error: null
   }
 
-  componentWillMount () {
-    api
-      .get(`templates/${this.props.exam.id}`)
-      .then(template => this.setState({ template }))
+  constructor (props) {
+    super(props)
+    this.loadTemplate()
   }
 
+  componentDidUpdate = (prevProps, prevState) => {
+    if (this.props.examID !== prevProps.examID) {
+      this.loadTemplate()
+    }
+  }
+
+  loadTemplate = () => api.get(`templates/${this.props.examID}`)
+    .then(template => this.setState({ template }))
+    .catch(err => {
+      if (err.status === 404) this.setState({ error: err.message })
+    })
+
   render () {
+    // This should happen when the exam does not exist.
+    if (this.state.error) return <Fail message={this.state.error} />
+
     return (
-      <React.Fragment>
-        <Hero title='Email' subtitle='So the students get their feedback' />
-        <section className='section'>
-          <div className='container'>
+      <>
             <div className='columns is-tablet'>
               <div className='column is-3-tablet'>
                 <TemplateControls
-                  exam={this.props.exam}
+                  examID={this.props.examID}
                   template={this.state.template}
                 />
                 <StudentControls
-                  exam={this.props.exam}
+                  examID={this.props.examID}
                   selectedStudent={this.state.selectedStudent}
                   setStudent={student => {
                     this.setState({
@@ -43,13 +55,13 @@ class Email extends React.Component {
                 />
                 <EmailControls
                   template={this.state.template}
-                  exam={this.props.exam}
+                  examID={this.props.examID}
                   student={this.state.selectedStudent}
                 />
               </div>
 
               <TemplateEditor
-                exam={this.props.exam}
+                examID={this.props.examID}
                 student={this.state.selectedStudent}
                 template={this.state.template}
                 onTemplateChange={template => {
@@ -59,9 +71,7 @@ class Email extends React.Component {
                 }}
               />
             </div>
-          </div>
-        </section>
-      </React.Fragment>
+      </>
     )
   }
 }

client/views/Exam.css

-:root {
-    --option-width:20px;
-    --label-font-size:14px;
-}
-
-div.mcq-widget {
-    display:inline-flex;
-}
-
-div.mcq-option {
-    display: block;
-    width: var(--option-width);
-    padding:2px;
-    box-sizing: content-box;
-    height: auto;
-}
-
-div.mcq-option div.mcq-option-label {
-    display:block;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: var(--label-font-size);
-    text-align: center;
-}
-
-div.mcq-option img.mcq-box {
-    display: block;
-    margin:auto;
-}
-
-
-.editor-content {
-  background-color: #ddd;
-  border-radius: 10px;
-  height: 100%;
-}
-
-.selection-area {
-  position: relative;
-}
-
-.widget {
-  border: 1px solid;
-  border-color: hsl(217, 71%, 53%);
-  border-radius: 3px;
-  background-color: hsla(217, 71%, 53%, 0.2);
-  margin: 0px;
-  padding: 0px;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}
-
-.widget.selected {
-  border-color: hsl(171, 100%, 41%);
-  background-color: hsla(171, 100%, 41%, 0.2)
-}
-
-.editor-side-panel {
-  background: #fff;
-  margin: 0.75em;
-}
-
-.field-text {
-  padding: calc(0.375em - 1px) 1em;
-  border-top: 1px solid hsl(217, 71%, 53%);
-  border-bottom: 1px solid hsl(217, 71%, 53%);
-}