form#quiz7(data-quiz='7')

  fieldset
    legend What new features does the 
      code picture
      |  tag in HTML5 offer over the 
      code img
      |  tag?
    p
      label
        input(type="radio" name="q1" value="0")
        |  We can use CSS media queries to select different images depending upon different conditions
    p
      label
        input(type="radio" name="q1" value="1")
        |  We can allow the browser to select a different type of image, depending upon what it supports
    p
      label
        input(type="radio" name="q1" value="2")
        |  Different conditions are split into different tags, for readability

    p
      label
        input(type="radio" name="q1" value="3")
        |  All of the above

  fieldset
    legend What advantage does using a default file in a directory on the web server offer?
    p
      label
        input(type="radio" name="q2" value="0")
        |  It prevents users from downloading our source code
    p
      label
        input(type="radio" name="q2" value="1")
        |  It means our website will work better on different platforms, such as Windows, MacOS and mobile
    p
      label
        input(type="radio" name="q2" value="2")
        |  It does not have any advantage

    p
      label
        input(type="radio" name="q2" value="3")
        |  We can omit the file name, meaning the URL is easier to read

  fieldset
    legend What does the 
      code exec
      |  function in 
      em Node
      |  allow us to do?
    p
      label
        input(type="radio" name="q3" value="0") 
        |  It offers a secure means of communication to the executive board
    p
      label
        input(type="radio" name="q3" value="1") 
        |  It lets us run commands on the terminal
    p
      label
        input(type="radio" name="q3" value="2") 
        |  It allows us to kill or "execute" a function which is stuck in a loop

    p
      label
        input(type="radio" name="q3" value="3")
        |  It gives us a report of memory use for an application after it has closed

  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