form#quiz5(data-quiz='5')

  fieldset
    legend Why is it a good idea to share common data between the live and development versions of the 
      em Webpack
      |  configuration file?
    p
      label
        input(type="radio" name="q1" value="0")
        |  Because it teaches children that sharing is healthy and children are our future
    p
      label
        input(type="radio" name="q1" value="1")
        |  Because it minimises the chance of a configuration issue showing up on one environment, but not another
    p
      label
        input(type="radio" name="q1" value="2")
        |  It's not a good idea: sharing data like this increases the attack footprint of the website

    p
      label
        input(type="radio" name="q1" value="3")
        |  In order to obfuscate our code and slow down "bad actors"

  fieldset
    legend Why do some 
      code import
      |  statements use { curly brackets } and some don't?
    p
      label
        input(type="radio" name="q2" value="0")
        |  Names inside curly brackets are functions which are named exports in a module, but not the 
        em default
        |  named export
    p
      label
        input(type="radio" name="q2" value="1")
        |  The brackets mean that the function is not mandatory and does not have to be used in the file
    p
      label
        input(type="radio" name="q2" value="2")
        |  It's a stylistic flourish which can be ignored, like semi-colons

    p
      label
        input(type="radio" name="q2" value="3")
        |  Names which appear outside of braces are static variables. Those inside braces are functions

  fieldset
    legend What does NPX do?
    p
      label
        input(type="radio" name="q3" value="0")
        |  It runs packages directly from the 
        code node_modules
        |  directory or over the internet
    p
      label
        input(type="radio" name="q3" value="1")
        |  It's the pre-release version of 
        em NPM
        |  and should only be run by authors of packages checking compatibility
    p
      label
        input(type="radio" name="q3" value="2")
        |  It's a competing package to 
        em NPM
        |  which offers significant performance improvements

    p
      label
        input(type="radio" name="q3" value="3")
        |  It uninstalls 
        em NPM

  fieldset
    legend Why is it useful to have a 
      code development
      |  and
      code production
      |  configuration file for 
      em Webpack
      | ?
    p
      label
        input(type="radio" name="q4" value="0")
        |  One is a useful backup for the other, in case it gets lost
    p
      label
        input(type="radio" name="q4" value="1")
        |  The 
        code development
        |  configuration lets us trace errors back to specific JavaScript modules. The 
        code production
        |  configuration allows us to create production-ready files.
    p
      label
        input(type="radio" name="q4" value="2")
        |  Only the 
        code production
        |  one is used. The other configuration is for trying out new configurations of 
        em Webpack

    p
      label
        input(type="radio" name="q4" value="3")
        |  Having two configurations has no utility and is a waste of effort
  
  p
    input(type="submit" value="Submit answers")


details.shop
  summary Emoji shop
  h2.h5 Current NodeBucks™ balance:
  p.h1
    span(data-js="balance") | 0
  p Earn NodeBucks™ by answering questions correctly
  p.items(data-js="emoji-shop")


details.inventory
  summary Inventory
  h2.h5 Current NodeBucks™ balance:
  p.h1
    span(data-js="balance") | 0
  p
    button(data-js="emoji-test") Test out emojis
  p ℹ️ Click on emojis in your intentory to toggle them on and off when you complete a quiz
  p.items(data-js="inventory")

footer
  p Curious about this quiz? Why not check out the 
    a(href='https://dev.to/rossangus/nodejs-for-developers-course-chapter-0-installing-and-updating-node-2kim') free Node.js for Developers course
    |  on dev.to.

output
View Compiled

External CSS

  1. https://codepen.io/ross-angus/pen/ZEgvwwy

External JavaScript

  1. https://codepen.io/ross-angus/pen/ZEgvwwy