diff --git a/.prettierrc b/.prettierrc
index 36301bc5..c64c02e9 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
 {
   "semi": false,
-  "singleQuote": true,
-  "trailingComma": "es5"
+  "singleQuote": false,
+  "trailingComma": "all"
 }
diff --git a/src/components/Banner.js b/src/components/Banner.js
index 8bfcdbbc..20f18e08 100644
--- a/src/components/Banner.js
+++ b/src/components/Banner.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import styled from 'styled-components'
-import Bruce from '../images/banner.svg'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import styled from "styled-components"
+import Bruce from "../images/banner.svg"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const BannerWrapper = styled.header`
   height: 30rem;
@@ -21,9 +21,9 @@ const BannerWrapper = styled.header`
 `
 
 const Heading = styled.div`
-  font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-weight: 500;
   font-size: 2rem;
   color: #c0392b;
diff --git a/src/components/Button.js b/src/components/Button.js
index b6ee0b96..35719061 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,14 +1,14 @@
-import React from 'react'
-import { Link } from 'gatsby'
-import styled from 'styled-components'
-import { Button as MaterialButton } from '@material-ui/core'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import { Link } from "gatsby"
+import styled from "styled-components"
+import { Button as MaterialButton } from "@material-ui/core"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const StyledLink = styled(Link)`
   margin: 1rem 0.5rem;
 `
 
-const Button = ({ children, to, onClick, disabled, variant = 'outlined' }) => (
+const Button = ({ children, to, onClick, disabled, variant = "outlined" }) => (
   <StyledLink
     onClick={onClick}
     to={to === undefined ? false : to}
diff --git a/src/components/Container.js b/src/components/Container.js
index ab77b1a1..083d3716 100644
--- a/src/components/Container.js
+++ b/src/components/Container.js
@@ -1,5 +1,5 @@
-import styled from 'styled-components'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import styled from "styled-components"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const Container = styled.div`
   width: 90%;
diff --git a/src/components/ContentArea.js b/src/components/ContentArea.js
index 73ad3cbe..7d033a4d 100644
--- a/src/components/ContentArea.js
+++ b/src/components/ContentArea.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import styled from 'styled-components'
-import { SIDEBAR_WIDTH } from './Sidebar'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import styled from "styled-components"
+import { SIDEBAR_WIDTH } from "./Sidebar"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const ContentAreaContainer = styled.main`
   @media only screen and (min-width: 1200px) {
diff --git a/src/components/CoursePageFooter.js b/src/components/CoursePageFooter.js
index 32b29ff2..b50834b3 100644
--- a/src/components/CoursePageFooter.js
+++ b/src/components/CoursePageFooter.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import styled from 'styled-components'
-import PagesInThisSection from '../partials/PagesInThisSection'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import styled from "styled-components"
+import PagesInThisSection from "../partials/PagesInThisSection"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const CoursePageFooterWrapper = styled.footer`
   background-color: white;
@@ -22,7 +22,7 @@ class CoursePageFooter extends React.Component {
       <CoursePageFooterWrapper>
         <CoursePageFooterContent>
           <PagesInThisSection
-            style={{ width: '400px', fontSize: '0.8rem', margin: 0 }}
+            style={{ width: "400px", fontSize: "0.8rem", margin: 0 }}
           />
         </CoursePageFooterContent>
       </CoursePageFooterWrapper>
diff --git a/src/components/EndOfSubSection.js b/src/components/EndOfSubSection.js
index 661b0ae3..ddd81aa9 100644
--- a/src/components/EndOfSubSection.js
+++ b/src/components/EndOfSubSection.js
@@ -1,12 +1,12 @@
-import React, { Fragment } from 'react'
-import styled from 'styled-components'
-import PagesContext from '../contexes/PagesContext'
-import { nthIndex } from '../util/strings'
-import { Link } from 'gatsby'
+import React, { Fragment } from "react"
+import styled from "styled-components"
+import PagesContext from "../contexes/PagesContext"
+import { nthIndex } from "../util/strings"
+import { Link } from "gatsby"
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowRight as icon } from '@fortawesome/free-solid-svg-icons'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faArrowRight as icon } from "@fortawesome/free-solid-svg-icons"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const StyledLink = styled(Link)`
   color: black;
@@ -47,7 +47,7 @@ class EndOfSubSection extends React.Component {
         {value => {
           const currentPath = value.current.path
           let sectionPath = currentPath
-          const sectionSeparator = nthIndex(currentPath, '/', 2)
+          const sectionSeparator = nthIndex(currentPath, "/", 2)
           if (sectionSeparator !== -1) {
             sectionPath = currentPath.substr(0, sectionSeparator)
           }
@@ -79,10 +79,10 @@ class EndOfSubSection extends React.Component {
           }
           return (
             <div>
-              Pääsit aliluvun loppuun!{' '}
+              Pääsit aliluvun loppuun!{" "}
               {nextPart && (
                 <Fragment>
-                  Jatka tästä seuraavaan osaan:{' '}
+                  Jatka tästä seuraavaan osaan:{" "}
                   <ButtonWrapper>
                     <StyledLink to={nextPart.path}>
                       <StyledIcon icon={icon} />
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 736d3616..b24ecab4 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,22 +1,22 @@
-import React from 'react'
-import styled from 'styled-components'
-import BackgroundImage from '../images/banner.svg'
-import { SIDEBAR_WIDTH } from './Sidebar'
-import { Card, CardContent } from '@material-ui/core'
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
-import { Link } from 'gatsby'
+import React from "react"
+import styled from "styled-components"
+import BackgroundImage from "../images/banner.svg"
+import { SIDEBAR_WIDTH } from "./Sidebar"
+import { Card, CardContent } from "@material-ui/core"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
+import { Link } from "gatsby"
 
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
-import UHLogo from '../images/uh-logo.png'
-import MoocfiLogo from '../images/moocfi-logo-bw.png'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import UHLogo from "../images/uh-logo.png"
+import MoocfiLogo from "../images/moocfi-logo-bw.png"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import {
   faTwitter,
   faFacebook,
   faYoutube,
   faGithub,
-} from '@fortawesome/free-brands-svg-icons'
+} from "@fortawesome/free-brands-svg-icons"
 
 const StyledIcon = styled(FontAwesomeIcon)`
   color: black;
@@ -118,7 +118,7 @@ class Footer extends React.Component {
                 </OutboundLink>
               </GithubContainer>
               <ContentContainer>
-                Kurssin on tehnyt Helsingin yliopiston{' '}
+                Kurssin on tehnyt Helsingin yliopiston{" "}
                 <OutboundLink
                   href="https://www.helsinki.fi/en/researchgroups/data-driven-education"
                   target="_blank"
diff --git a/src/components/Loading.js b/src/components/Loading.js
index ac09a29b..579c2eed 100644
--- a/src/components/Loading.js
+++ b/src/components/Loading.js
@@ -1,8 +1,8 @@
-import React, { Fragment } from 'react'
-import styled from 'styled-components'
+import React, { Fragment } from "react"
+import styled from "styled-components"
 
-import { CircularProgress } from '@material-ui/core'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import { CircularProgress } from "@material-ui/core"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const LoadingWrapper = styled.div`
   padding: 5rem;
diff --git a/src/components/LoginControls.js b/src/components/LoginControls.js
index 39f61f35..acb9f7be 100644
--- a/src/components/LoginControls.js
+++ b/src/components/LoginControls.js
@@ -1,14 +1,14 @@
-import React, { Fragment } from 'react'
-import Button from './Button'
-import { signOut, getCachedUserDetails } from '../services/moocfi'
+import React, { Fragment } from "react"
+import Button from "./Button"
+import { signOut, getCachedUserDetails } from "../services/moocfi"
 import LoginStateContext, {
   withLoginStateContext,
-} from '../contexes/LoginStateContext'
+} from "../contexes/LoginStateContext"
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUser as profileIcon } from '@fortawesome/free-solid-svg-icons'
-import styled from 'styled-components'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faUser as profileIcon } from "@fortawesome/free-solid-svg-icons"
+import styled from "styled-components"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const StyledIcon = styled(FontAwesomeIcon)`
   margin-right: 0.5rem;
@@ -27,9 +27,9 @@ class LoginControls extends React.Component {
       return
     }
     const details = await getCachedUserDetails()
-    let name = `${details?.user_field?.first_name || ''} ${details?.user_field
-      ?.last_name || ''}`.trim()
-    if (name === '') {
+    let name = `${details?.user_field?.first_name || ""} ${details?.user_field
+      ?.last_name || ""}`.trim()
+    if (name === "") {
       name = details.email
     }
     this.setState({
@@ -38,7 +38,7 @@ class LoginControls extends React.Component {
   }
 
   state = {
-    name: 'Loading...',
+    name: "Loading...",
   }
 
   render() {
diff --git a/src/components/Logo.js b/src/components/Logo.js
index e058384d..f4420aec 100644
--- a/src/components/Logo.js
+++ b/src/components/Logo.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import logo from '../images/logo.png'
-import styled from 'styled-components'
-import 'typeface-open-sans-condensed'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import logo from "../images/logo.png"
+import styled from "styled-components"
+import "typeface-open-sans-condensed"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const LogoImg = styled.img`
   width: 50px;
@@ -13,7 +13,7 @@ const LogoImg = styled.img`
 
 const LogoTypography = styled.div`
   flex: 1;
-  font-family: 'Open Sans Condensed', sans-serif !important;
+  font-family: "Open Sans Condensed", sans-serif !important;
   font-size: 1.75rem !important;
 `
 
diff --git a/src/components/MailinglistForm.js b/src/components/MailinglistForm.js
index 3750babb..40c46cba 100644
--- a/src/components/MailinglistForm.js
+++ b/src/components/MailinglistForm.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import styled from 'styled-components'
+import React from "react"
+import styled from "styled-components"
 
-import { TextField, Button } from '@material-ui/core'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import { TextField, Button } from "@material-ui/core"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const Container = styled.div`
   padding: 3rem;
diff --git a/src/components/PointsBalloon/PointsBalloonBalloon.js b/src/components/PointsBalloon/PointsBalloonBalloon.js
index 3c7637e0..5b313ba9 100644
--- a/src/components/PointsBalloon/PointsBalloonBalloon.js
+++ b/src/components/PointsBalloon/PointsBalloonBalloon.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
-import Fab from '@material-ui/core/Fab'
-import styled from 'styled-components'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChartLine as icon } from '@fortawesome/free-solid-svg-icons'
+import React from "react"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
+import Fab from "@material-ui/core/Fab"
+import styled from "styled-components"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faChartLine as icon } from "@fortawesome/free-solid-svg-icons"
 
 const StyledIcon = styled(FontAwesomeIcon)`
   color: white;
diff --git a/src/components/PointsBalloon/PointsBalloonContent.js b/src/components/PointsBalloon/PointsBalloonContent.js
index d67fb11b..0635fe69 100644
--- a/src/components/PointsBalloon/PointsBalloonContent.js
+++ b/src/components/PointsBalloon/PointsBalloonContent.js
@@ -1,11 +1,10 @@
-import React, { Fragment } from 'react'
-import LoginStateContext from '../../contexes/LoginStateContext'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
-import { Modal, Paper, Button } from '@material-ui/core'
-import styled from 'styled-components'
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
-import Loading from '../Loading'
-
+import React, { Fragment } from "react"
+import LoginStateContext from "../../contexes/LoginStateContext"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
+import { Modal, Paper, Button } from "@material-ui/core"
+import styled from "styled-components"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
+import Loading from "../Loading"
 
 const StyledModal = styled(Modal)`
   z-index: 500 !important;
@@ -35,8 +34,8 @@ const Title = styled.h1`
 `
 
 const data = [
-  { group: 'Osa 1', Ohjelmointitehtävät: 80, Kyselyt: 20 },
-  { group: 'Osa 2', Ohjelmointitehtävät: 30, Kyselyt: 40 },
+  { group: "Osa 1", Ohjelmointitehtävät: 80, Kyselyt: 20 },
+  { group: "Osa 2", Ohjelmointitehtävät: 30, Kyselyt: 40 },
 ]
 
 class PointsBalloonContent extends React.Component {
@@ -69,12 +68,14 @@ class PointsBalloonContent extends React.Component {
               <p>
                 Tähän tulee visualisaatio edistymisestäsi heti kun olemme
                 saaneet tämän ominaisuuden toteutettua. Odotellessasi voit
-                tutkia edistymisestäsi ohjelmointitehtävissä
-                TMC:ssä:{' '}
+                tutkia edistymisestäsi ohjelmointitehtävissä TMC:ssä:{" "}
                 <OutboundLink href="https://tmc.mooc.fi/participants/me">
                   https://tmc.mooc.fi/participants/me
                 </OutboundLink>
-                . Huomaathan, että pisteisiisi vaikuttaa muutkin tehtävät kuin ohjelmointitehtävät, kuten vaikka materiaalin seassa olevat kyselyt. Näiden tehtävien pisteet eivät näy TMC:ssä. Kiitos kärsivällisyydestäsi!
+                . Huomaathan, että pisteisiisi vaikuttaa muutkin tehtävät kuin
+                ohjelmointitehtävät, kuten vaikka materiaalin seassa olevat
+                kyselyt. Näiden tehtävien pisteet eivät näy TMC:ssä. Kiitos
+                kärsivällisyydestäsi!
               </p>
             </Fragment>
           </Loading>
diff --git a/src/components/PointsBalloon/index.js b/src/components/PointsBalloon/index.js
index 31360992..35444018 100644
--- a/src/components/PointsBalloon/index.js
+++ b/src/components/PointsBalloon/index.js
@@ -1,10 +1,10 @@
-import React, { Fragment } from 'react'
-import LoginStateContext from '../../contexes/LoginStateContext'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
-import styled from 'styled-components'
+import React, { Fragment } from "react"
+import LoginStateContext from "../../contexes/LoginStateContext"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
+import styled from "styled-components"
 
-import PointsBalloonBalloon from './PointsBalloonBalloon'
-import PointsBalloonContent from './PointsBalloonContent'
+import PointsBalloonBalloon from "./PointsBalloonBalloon"
+import PointsBalloonContent from "./PointsBalloonContent"
 
 const PoitsBalloonContainer = styled.div`
   position: fixed;
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index 5f0613c4..f04fa092 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -1,15 +1,15 @@
-import React from 'react'
-import styled from 'styled-components'
-import { graphql, StaticQuery } from 'gatsby'
-import { Button } from '@material-ui/core'
+import React from "react"
+import styled from "styled-components"
+import { graphql, StaticQuery } from "gatsby"
+import { Button } from "@material-ui/core"
 
-import Logo from './Logo'
-import TreeView from './TreeView'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import Logo from "./Logo"
+import TreeView from "./TreeView"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 
-import { faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons"
 
 const StyledIcon = styled(FontAwesomeIcon)`
   vertical-align: middle;
@@ -19,7 +19,7 @@ const StyledIcon = styled(FontAwesomeIcon)`
   font-size: 1.5em;
 `
 
-export const SIDEBAR_WIDTH = '20rem'
+export const SIDEBAR_WIDTH = "20rem"
 
 const SidebarContainer = styled.div`
   display: flex;
@@ -86,43 +86,43 @@ const MenuExpanderWrapper = styled.div`
 
 var content2 = [
   {
-    title: 'Tietoa kurssista',
-    path: '/',
+    title: "Tietoa kurssista",
+    path: "/",
   },
   {
-    title: 'Osaamistavoitteet',
-    path: '/osaamistavoitteet',
+    title: "Osaamistavoitteet",
+    path: "/osaamistavoitteet",
   },
   {
-    title: 'Arvostelu ja kokeet',
-    path: '/arvostelu-ja-kokeet',
+    title: "Arvostelu ja kokeet",
+    path: "/arvostelu-ja-kokeet",
   },
   {
-    title: 'Mahdollisuus opinto-oikeuteen',
-    path: '/opinto-oikeus',
+    title: "Mahdollisuus opinto-oikeuteen",
+    path: "/opinto-oikeus",
   },
-  { title: 'Tukiväylät', path: '/tukivaylat' },
+  { title: "Tukiväylät", path: "/tukivaylat" },
   {
-    title: 'Opettajille ja opinto-ohjaajille',
-    path: '/opettajille',
+    title: "Opettajille ja opinto-ohjaajille",
+    path: "/opettajille",
   },
   { separator: true },
 ]
 
 var futurePages = [
-  { title: 'Osa 3', tba: '11.1.2019' },
-  { title: 'Osa 4', tba: '25.1.2019' },
-  { title: 'Osa 5', tba: '1.2.2019' },
-  { title: 'Osa 6', tba: '8.2.2019' },
-  { title: 'Osa 7', tba: '15.2.2019' },
+  { title: "Osa 3", tba: "11.1.2019" },
+  { title: "Osa 4", tba: "25.1.2019" },
+  { title: "Osa 5", tba: "1.2.2019" },
+  { title: "Osa 6", tba: "8.2.2019" },
+  { title: "Osa 7", tba: "15.2.2019" },
   { separator: true },
-  { title: 'Osa 8', tba: '1.3.2019' },
-  { title: 'Osa 9', tba: '8.3.2019' },
-  { title: 'Osa 10', tba: '15.3.2019' },
-  { title: 'Osa 11', tba: '22.3.2019' },
-  { title: 'Osa 12', tba: '29.3.2019' },
-  { title: 'Osa 13', tba: '12.4.2019' },
-  { title: 'Osa 14', tba: '19.4.2019' },
+  { title: "Osa 8", tba: "1.3.2019" },
+  { title: "Osa 9", tba: "8.3.2019" },
+  { title: "Osa 10", tba: "15.3.2019" },
+  { title: "Osa 11", tba: "22.3.2019" },
+  { title: "Osa 12", tba: "29.3.2019" },
+  { title: "Osa 13", tba: "12.4.2019" },
+  { title: "Osa 14", tba: "19.4.2019" },
 ]
 
 const MobileWrapper = styled.div`
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index a3e8c458..accf01c9 100644
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import styled from 'styled-components'
-import LoginControls from './LoginControls';
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary';
+import React from "react"
+import styled from "styled-components"
+import LoginControls from "./LoginControls"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const TopBarContainer = styled.div`
   height: 4rem;
@@ -15,9 +15,11 @@ const TopBarContainer = styled.div`
 
 class TopBar extends React.Component {
   render() {
-    return <TopBarContainer>
-      <LoginControls />
-    </TopBarContainer>
+    return (
+      <TopBarContainer>
+        <LoginControls />
+      </TopBarContainer>
+    )
   }
 }
 
diff --git a/src/components/TreeView/TreeViewItem.js b/src/components/TreeView/TreeViewItem.js
index f0ec61bb..e401ad24 100644
--- a/src/components/TreeView/TreeViewItem.js
+++ b/src/components/TreeView/TreeViewItem.js
@@ -1,19 +1,19 @@
-import React from 'react'
-import styled from 'styled-components'
+import React from "react"
+import styled from "styled-components"
 
-import { Motion, spring } from 'react-motion'
+import { Motion, spring } from "react-motion"
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCaretRight } from '@fortawesome/free-solid-svg-icons'
-import { trackElementHeight } from '../../util/trackHeight'
-import GatsbyLink from 'gatsby-link'
-import { Location } from '@reach/router'
-import Avatar from '@material-ui/core/Avatar'
-import Chip from '@material-ui/core/Chip'
-import Divider from '@material-ui/core/Divider';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faCaretRight } from "@fortawesome/free-solid-svg-icons"
+import { trackElementHeight } from "../../util/trackHeight"
+import GatsbyLink from "gatsby-link"
+import { Location } from "@reach/router"
+import Avatar from "@material-ui/core/Avatar"
+import Chip from "@material-ui/core/Chip"
+import Divider from "@material-ui/core/Divider"
 
-import { faCalendarAlt as icon } from '@fortawesome/free-regular-svg-icons'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
+import { faCalendarAlt as icon } from "@fortawesome/free-regular-svg-icons"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
 
 const ChildrenList = styled.ul`
   height: calc(var(--open-ratio) * var(--calculated-height) * 1px);
@@ -39,7 +39,7 @@ const NavigationLink = styled(GatsbyLink)`
   width: 100%;
   background-color: white;
   ${props =>
-    props.active === 't' &&
+    props.active === "t" &&
     `
     border-color: #f75b4b !important;
     background-color: #ffeeed;
@@ -126,7 +126,7 @@ class TreeViewItem extends React.Component {
         <Location>
           {({ navigate, location }) => {
             let active = location.pathname.startsWith(this.props.item.path)
-            if (this.props.item.path === '/') {
+            if (this.props.item.path === "/") {
               active = location.pathname === this.props.item.path
             }
             return (
@@ -140,18 +140,18 @@ class TreeViewItem extends React.Component {
                     <ItemTitleWrapper
                       className={`nav-item-${this.props.item.title
                         .toLowerCase()
-                        .replace(/ /g, '-')}`}
+                        .replace(/ /g, "-")}`}
                     >
                       {this.props.item.children && (
                         <StyledIcon
-                          style={{ '--open-ratio': `${openRatio}` }}
+                          style={{ "--open-ratio": `${openRatio}` }}
                           icon={faCaretRight}
                           size="1x"
                         />
                       )}
                       <LinkWrapper
-                        to={this.props.item.path || '#'}
-                        active={active ? 't' : 'f'}
+                        to={this.props.item.path || "#"}
+                        active={active ? "t" : "f"}
                         disabled={this.props.item.tba}
                       >
                         <ListItem onClick={this.onClick}>
@@ -172,7 +172,7 @@ class TreeViewItem extends React.Component {
                     {this.props.item.children && (
                       <ChildrenList
                         innerRef={this.childrenListRef}
-                        style={{ '--open-ratio': `${openRatio}` }}
+                        style={{ "--open-ratio": `${openRatio}` }}
                       >
                         {this.props.item.children.map(i => (
                           <TreeViewItem key={i.title} item={i} />
diff --git a/src/components/TreeView/index.js b/src/components/TreeView/index.js
index 36bd4008..f80b1f50 100644
--- a/src/components/TreeView/index.js
+++ b/src/components/TreeView/index.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import TreeViewItem from './TreeViewItem'
-import styled from 'styled-components'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
+import React from "react"
+import TreeViewItem from "./TreeViewItem"
+import styled from "styled-components"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
 
 const StyledUl = styled.ul`
   margin-left: 0;
diff --git a/src/components/user/ConfirmEmail.js b/src/components/user/ConfirmEmail.js
index ac0a6868..b883d593 100644
--- a/src/components/user/ConfirmEmail.js
+++ b/src/components/user/ConfirmEmail.js
@@ -1,10 +1,10 @@
-import React from 'react'
-import { Link } from 'gatsby'
+import React from "react"
+import { Link } from "gatsby"
 
-import EmailExample from '../../images/email-example.png'
+import EmailExample from "../../images/email-example.png"
 
-import styled from 'styled-components'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary';
+import styled from "styled-components"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
 
 const InfoBox = styled.div`
   margin-bottom: 2rem;
@@ -39,12 +39,10 @@ class ConfirmEmail extends React.Component {
         <InfoBox>
           <p>
             Olemme lähettäneet sähköpostiisi sähköpostiosoitteen
-            varmistuslinkin. Käy nyt sähköpostissasi ja varmista osoitteesi.{' '}
+            varmistuslinkin. Käy nyt sähköpostissasi ja varmista osoitteesi.{" "}
           </p>
 
-          <p>
-            Sähköpostin pitäisi näyttää tälläiseltä:
-          </p>
+          <p>Sähköpostin pitäisi näyttää tälläiseltä:</p>
 
           <StyledImage src={EmailExample} alt="Esimerkki sähköpostista" />
         </InfoBox>
diff --git a/src/components/user/CourseOptionsEditor.js b/src/components/user/CourseOptionsEditor.js
index 9b37df58..950ee701 100644
--- a/src/components/user/CourseOptionsEditor.js
+++ b/src/components/user/CourseOptionsEditor.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react"
 import {
   TextField,
   Button,
@@ -6,16 +6,16 @@ import {
   Checkbox,
   Radio,
   RadioGroup,
-} from '@material-ui/core'
+} from "@material-ui/core"
 
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
-import Loading from '../Loading'
+import Loading from "../Loading"
 
-import { updateUserDetails, userDetails } from '../../services/moocfi'
+import { updateUserDetails, userDetails } from "../../services/moocfi"
 
-import styled from 'styled-components'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
+import styled from "styled-components"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
 
 const Row = styled.div`
   margin-bottom: 1.5rem;
@@ -48,7 +48,7 @@ class CourseOptionsEditor extends React.Component {
       },
       () => {
         this.validate()
-      }
+      },
     )
   }
 
@@ -143,7 +143,7 @@ class CourseOptionsEditor extends React.Component {
                   InputLabelProps={{
                     shrink:
                       this.state.first_name ||
-                      this.state.focused === 'first_name',
+                      this.state.focused === "first_name",
                   }}
                   fullWidth
                   value={this.state.first_name}
@@ -163,7 +163,7 @@ class CourseOptionsEditor extends React.Component {
                   InputLabelProps={{
                     shrink:
                       this.state.last_name ||
-                      this.state.focused === 'last_name',
+                      this.state.focused === "last_name",
                   }}
                   fullWidth
                   value={this.state.last_name}
@@ -182,7 +182,7 @@ class CourseOptionsEditor extends React.Component {
                   InputLabelProps={{
                     shrink:
                       this.state.student_number ||
-                      this.state.focused === 'student_number',
+                      this.state.focused === "student_number",
                   }}
                   fullWidth
                   value={this.state.student_number}
@@ -262,7 +262,7 @@ class CourseOptionsEditor extends React.Component {
 
           <p>
             Tällaisesta oppimisanalytiikaksi kutsutusta tutkimuksesta
-            kiinnostuneiden kannattaa tutustua esimerkiksi artikkeliin{' '}
+            kiinnostuneiden kannattaa tutustua esimerkiksi artikkeliin{" "}
             <OutboundLink
               href="https://dl.acm.org/citation.cfm?id=2858798"
               target="_blank"
diff --git a/src/components/user/CreateAccountForm.js b/src/components/user/CreateAccountForm.js
index 4e9f7d54..64c8c653 100644
--- a/src/components/user/CreateAccountForm.js
+++ b/src/components/user/CreateAccountForm.js
@@ -1,13 +1,13 @@
-import React from 'react'
-import { Link } from 'gatsby'
-import { TextField, Button } from '@material-ui/core'
-import { createAccount, authenticate } from '../../services/moocfi'
-import { capitalizeFirstLetter } from '../../util/strings'
-import { navigate } from 'gatsby'
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
+import React from "react"
+import { Link } from "gatsby"
+import { TextField, Button } from "@material-ui/core"
+import { createAccount, authenticate } from "../../services/moocfi"
+import { capitalizeFirstLetter } from "../../util/strings"
+import { navigate } from "gatsby"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
-import styled from 'styled-components'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
+import styled from "styled-components"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
 
 const Row = styled.div`
   margin-bottom: 1.5rem;
@@ -38,7 +38,7 @@ class CreateAccountForm extends React.Component {
         password: this.state.password,
         password_confirmation: this.state.password_confirmation,
       })
-      console.log('Created an account:', JSON.stringify(res))
+      console.log("Created an account:", JSON.stringify(res))
       await authenticate({
         username: this.state.email,
         password: this.state.password,
@@ -46,25 +46,25 @@ class CreateAccountForm extends React.Component {
       this.props.onComplete()
     } catch (error) {
       try {
-        let message = ''
+        let message = ""
         Object.entries(error).forEach(o => {
           const key = o[0]
           const value = o[1]
           value.forEach(msg => {
             let newMessage = capitalizeFirstLetter(
-              `${key.replace(/_/g, ' ')} ${msg}.`
+              `${key.replace(/_/g, " ")} ${msg}.`,
             )
-            if (newMessage === 'Email has already been taken.') {
+            if (newMessage === "Email has already been taken.") {
               newMessage =
-                'Sähköpostiosoitteesi on jo käytössä. Oletko tehnyt aikaisemmin mooc.fi:n kursseja?'
+                "Sähköpostiosoitteesi on jo käytössä. Oletko tehnyt aikaisemmin mooc.fi:n kursseja?"
             }
             message = `${message} ${newMessage}`
           })
         })
 
-        if (message === '') {
+        if (message === "") {
           message =
-            'Ongelma tunnuksen luonnissa. Virhe oli: ' + JSON.stringify(error)
+            "Ongelma tunnuksen luonnissa. Virhe oli: " + JSON.stringify(error)
         }
         this.setState({ error: message, submitting: false, errorObj: error })
       } catch (_error2) {
@@ -85,7 +85,7 @@ class CreateAccountForm extends React.Component {
 
   validate = () => {
     let newState = {
-      error: '',
+      error: "",
       errorObj: {},
     }
     const {
@@ -97,11 +97,11 @@ class CreateAccountForm extends React.Component {
       triedSubmitting,
     } = this.state
     if (email && validateEmail) {
-      if (email.indexOf('@') === -1) {
+      if (email.indexOf("@") === -1) {
         newState.error += "Sähköpostiosoitessa ei ole '@'-merkkiä. "
         newState.errorObj.email = "Sähköpostiosoitessa ei ole '@'-merkkiä. "
       }
-      if (email && email.indexOf('.') === -1) {
+      if (email && email.indexOf(".") === -1) {
         newState.error += "Sähköpostiosoitessa ei ole '.'-merkkiä. "
         newState.errorObj.email = "Sähköpostiosoitessa ei ole '.'-merkkiä. "
       }
@@ -109,15 +109,15 @@ class CreateAccountForm extends React.Component {
 
     if (password && password_confirmation && validatePassword) {
       if (password !== password_confirmation) {
-        newState.error += 'Salasana ja salasana uudestaan eivät olleet samoja. '
+        newState.error += "Salasana ja salasana uudestaan eivät olleet samoja. "
         newState.errorObj.password =
-          'Salasana ja salasana uudestaan eivät olleet samoja.'
+          "Salasana ja salasana uudestaan eivät olleet samoja."
         newState.errorObj.password_confirmation =
-          'Salasana ja salasana uudestaan eivät olleet samoja.'
+          "Salasana ja salasana uudestaan eivät olleet samoja."
       }
     }
 
-    if (newState.error === '') {
+    if (newState.error === "") {
       newState.error = false
       newState.canSubmit = true
     }
@@ -147,7 +147,7 @@ class CreateAccountForm extends React.Component {
 
   render() {
     if (this.context.loggedIn) {
-      navigate('/')
+      navigate("/")
       return <div>Redirecting...</div>
     }
     return (
@@ -155,10 +155,14 @@ class CreateAccountForm extends React.Component {
         <h1>Luo käyttäjätunnus</h1>
         <Form onChange={this.validate}>
           <InfoBox>
-            Tämä kurssi käyttää{' '}
-            <OutboundLink href="https://mooc.fi" target="_blank" rel="noopener noreferrer">
+            Tämä kurssi käyttää{" "}
+            <OutboundLink
+              href="https://mooc.fi"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               mooc.fi
-            </OutboundLink>{' '}
+            </OutboundLink>{" "}
             käyttäjätunnuksia. Jos olet aikaisemmin tehnyt mooc.fi -kursseja,
             voit käyttää sisäänkirjautumissivulla olemassaolevia tunnuksiasi.
             Tällä sivulla voit luoda uuden tunnuksen, joka toimii suurimmassa
@@ -186,7 +190,7 @@ class CreateAccountForm extends React.Component {
           <Row>
             <TextField
               variant="outlined"
-              type={this.state.showPassword ? 'text' : 'password'}
+              type={this.state.showPassword ? "text" : "password"}
               label="Salasana"
               name="password"
               error={this.state.errorObj.password}
@@ -198,7 +202,7 @@ class CreateAccountForm extends React.Component {
           <Row>
             <TextField
               variant="outlined"
-              type={this.state.showPassword ? 'text' : 'password'}
+              type={this.state.showPassword ? "text" : "password"}
               label="Salasana uudestaan"
               name="password_confirmation"
               error={this.state.errorObj.password_confirmation}
diff --git a/src/contexes/LoginStateContext.js b/src/contexes/LoginStateContext.js
index ff86db13..089fbaac 100644
--- a/src/contexes/LoginStateContext.js
+++ b/src/contexes/LoginStateContext.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import { loggedIn, onLoginStateChanged } from '../services/moocfi'
+import React from "react"
+import { loggedIn, onLoginStateChanged } from "../services/moocfi"
 
 const LoginStateContext = React.createContext()
 
diff --git a/src/contexes/PagesContext.js b/src/contexes/PagesContext.js
index 199eea34..1ce9a913 100644
--- a/src/contexes/PagesContext.js
+++ b/src/contexes/PagesContext.js
@@ -1,3 +1,3 @@
-import React from "react";
+import React from "react"
 
 export default React.createContext()
diff --git a/src/getPageContext.js b/src/getPageContext.js
index 1d148eb4..8e2192b4 100644
--- a/src/getPageContext.js
+++ b/src/getPageContext.js
@@ -1,12 +1,12 @@
 /* eslint-disable no-underscore-dangle */
 
-import { SheetsRegistry } from 'jss'
+import { SheetsRegistry } from "jss"
 import {
   createMuiTheme,
   createGenerateClassName,
-} from '@material-ui/core/styles'
-import red from '@material-ui/core/colors/red'
-import blue from '@material-ui/core/colors/blue'
+} from "@material-ui/core/styles"
+import red from "@material-ui/core/colors/red"
+import blue from "@material-ui/core/colors/blue"
 
 // A theme with custom primary and secondary color.
 // It's optional.
@@ -29,15 +29,15 @@ const theme = createMuiTheme({
   overrides: {
     MuiButton: {
       root: {
-        textTransform: 'none',
+        textTransform: "none",
       },
     },
     MuiTypography: {
       body2: {
-        fontSize: '16px',
+        fontSize: "16px",
       },
       subheading: {
-        fontSize: '18px',
+        fontSize: "18px",
       },
     },
   },
diff --git a/src/html.js b/src/html.js
index 91b5a50d..70298e71 100644
--- a/src/html.js
+++ b/src/html.js
@@ -22,10 +22,8 @@ export default class HTML extends React.Component {
             dangerouslySetInnerHTML={{ __html: this.props.body }}
           />
           {this.props.postBodyComponents}
-          <script>
-            window._QUIZNATOR_ENABLED = true;
-          </script>
-          <script src="https://quiznator.mooc.fi/javascripts/plugin-loader.min.js"></script>
+          <script>window._QUIZNATOR_ENABLED = true;</script>
+          <script src="https://quiznator.mooc.fi/javascripts/plugin-loader.min.js" />
         </body>
       </html>
     )
diff --git a/src/pages/404.js b/src/pages/404.js
index 99fefe35..de4b61c2 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import Layout from '../templates/Layout'
-import Container from '../components/Container'
-import { withLoginStateContext } from '../contexes/LoginStateContext'
-import Helmet from 'react-helmet'
+import React from "react"
+import Layout from "../templates/Layout"
+import Container from "../components/Container"
+import { withLoginStateContext } from "../contexes/LoginStateContext"
+import Helmet from "react-helmet"
 
 const NotFoundPage = () => (
   <Layout>
diff --git a/src/pages/arvostelu-ja-kokeet.js b/src/pages/arvostelu-ja-kokeet.js
index 71f0f48d..393b593b 100644
--- a/src/pages/arvostelu-ja-kokeet.js
+++ b/src/pages/arvostelu-ja-kokeet.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import Helmet from 'react-helmet'
+import React from "react"
+import Helmet from "react-helmet"
 
-import Layout from '../templates/Layout'
-import Container from '../components/Container'
-import { withLoginStateContext } from '../contexes/LoginStateContext'
+import Layout from "../templates/Layout"
+import Container from "../components/Container"
+import { withLoginStateContext } from "../contexes/LoginStateContext"
 
 import {
   Table,
@@ -11,7 +11,7 @@ import {
   TableCell,
   TableHead,
   TableRow,
-} from '@material-ui/core'
+} from "@material-ui/core"
 
 const IndexPage = () => (
   <Layout>
diff --git a/src/pages/credits.js b/src/pages/credits.js
index 5a820e13..0f180ce4 100644
--- a/src/pages/credits.js
+++ b/src/pages/credits.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import Helmet from 'react-helmet'
-import Layout from '../templates/Layout'
-import Container from '../components/Container'
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
-import { withLoginStateContext } from '../contexes/LoginStateContext'
+import React from "react"
+import Helmet from "react-helmet"
+import Layout from "../templates/Layout"
+import Container from "../components/Container"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
+import { withLoginStateContext } from "../contexes/LoginStateContext"
 
 const Credits = () => (
   <Layout>
@@ -11,7 +11,7 @@ const Credits = () => (
       <Helmet title="Kiitokset ja materiaalista" />
       <h1>Kiitokset ja materiaalista</h1>
       <p>
-        Kurssin on tehnyt Helsingin yliopiston{' '}
+        Kurssin on tehnyt Helsingin yliopiston{" "}
         <OutboundLink
           href="https://www.helsinki.fi/en/researchgroups/data-driven-education"
           target="_blank"
@@ -45,14 +45,14 @@ const Credits = () => (
       </ul>
 
       <p>
-        Kurssin materiaali on lisensoitu{' '}
+        Kurssin materiaali on lisensoitu{" "}
         <OutboundLink
           href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fi"
           target="_blank"
           rel="noopener noreferrer"
         >
           Creative Commons BY-NC-SA 4.0
-        </OutboundLink>{' '}
+        </OutboundLink>{" "}
         -lisenssillä, joten voit käyttää ja levittää sitä vapaasti, kunhan
         alkuperäisten tekijöiden nimiä ei poisteta. Jos teet muutoksia
         materiaaliin ja haluat levittää muunneltua versiota, se täytyy
@@ -63,15 +63,15 @@ const Credits = () => (
       <h2>Kurssilla käytössä oleva teknologia</h2>
 
       <p>
-        Kurssin sivun ovat tehneet{' '}
+        Kurssin sivun ovat tehneet{" "}
         <OutboundLink
           href="https://github.com/nygrenh"
           target="_blank"
           rel="noopener noreferrer"
         >
           Henrik Nygren
-        </OutboundLink>{' '}
-        ja{' '}
+        </OutboundLink>{" "}
+        ja{" "}
         <OutboundLink
           href="https://github.com/redande"
           target="_blank"
@@ -79,16 +79,16 @@ const Credits = () => (
         >
           Antti Leinonen
         </OutboundLink>
-        . Helsingin yliopiston{' '}
+        . Helsingin yliopiston{" "}
         <OutboundLink
           href="https://www.helsinki.fi/en/researchgroups/data-driven-education"
           target="_blank"
           rel="noopener noreferrer"
         >
           Agile Education Research -tutkimusryhmä
-        </OutboundLink>{' '}
+        </OutboundLink>{" "}
         on luonut ja ylläpitää kurssilla käytettyä ohjelmointitehtävien
-        palautusympäristöä{' '}
+        palautusympäristöä{" "}
         <OutboundLink
           href="https://tmc.mooc.fi"
           target="_blank"
diff --git a/src/pages/index.js b/src/pages/index.js
index 6be601bc..8e5f4e30 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,10 +1,10 @@
-import React from 'react'
+import React from "react"
 
-import Layout from '../templates/Layout'
-import Banner from '../components/Banner'
-import GatsbyLink from 'gatsby-link'
-import { Link } from 'gatsby'
-import { withLoginStateContext } from '../contexes/LoginStateContext'
+import Layout from "../templates/Layout"
+import Banner from "../components/Banner"
+import GatsbyLink from "gatsby-link"
+import { Link } from "gatsby"
+import { withLoginStateContext } from "../contexes/LoginStateContext"
 
 import {
   Table,
@@ -12,8 +12,8 @@ import {
   TableCell,
   TableHead,
   TableRow,
-} from '@material-ui/core'
-import Container from '../components/Container'
+} from "@material-ui/core"
+import Container from "../components/Container"
 
 const IndexPage = () => (
   <Layout>
@@ -41,7 +41,7 @@ const IndexPage = () => (
           hakemiseen liittyvät tiedot huolellisesti. Esimerkiksi tehtävien
           aikarajoista EI voida joustaa lainkaan. Ehdot opinto-oikeuden
           saamiseksi päivittyvät lähempänä yhteishakua. Lisätietoa
-          opinto-oikeudesta saat{' '}
+          opinto-oikeudesta saat{" "}
           <GatsbyLink to="/opinto-oikeus">täältä</GatsbyLink>.
         </p>
         <p>
diff --git a/src/pages/missing-info.js b/src/pages/missing-info.js
index 2deee09a..dc43769c 100644
--- a/src/pages/missing-info.js
+++ b/src/pages/missing-info.js
@@ -1,27 +1,27 @@
-import React from 'react'
+import React from "react"
 
-import Layout from '../templates/Layout'
-import CourseOptionsEditor from '../components/user/CourseOptionsEditor'
-import { navigate } from 'gatsby'
+import Layout from "../templates/Layout"
+import CourseOptionsEditor from "../components/user/CourseOptionsEditor"
+import { navigate } from "gatsby"
 import LoginStateContext, {
   withLoginStateContext,
-} from '../contexes/LoginStateContext'
+} from "../contexes/LoginStateContext"
 
 class MissingInfo extends React.Component {
   static contextType = LoginStateContext
 
   onStepComplete = () => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       window.history.back()
       return
     }
-    navigate('/')
+    navigate("/")
   }
 
   render() {
     if (!this.context.loggedIn) {
-      if (typeof window !== 'undefined') {
-        navigate('/sign-in')
+      if (typeof window !== "undefined") {
+        navigate("/sign-in")
       }
       return <div>Redirecting...</div>
     }
diff --git a/src/pages/opettajille.js b/src/pages/opettajille.js
index ee4226d8..c7dc9db8 100644
--- a/src/pages/opettajille.js
+++ b/src/pages/opettajille.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import Helmet from 'react-helmet'
-import Layout from '../templates/Layout'
-import Container from '../components/Container'
-import { withLoginStateContext } from '../contexes/LoginStateContext'
+import React from "react"
+import Helmet from "react-helmet"
+import Layout from "../templates/Layout"
+import Container from "../components/Container"
+import { withLoginStateContext } from "../contexes/LoginStateContext"
 
 const IndexPage = () => (
   <Layout>
diff --git a/src/pages/opinto-oikeus.js b/src/pages/opinto-oikeus.js
index 8fd02980..43b59937 100644
--- a/src/pages/opinto-oikeus.js
+++ b/src/pages/opinto-oikeus.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import Helmet from 'react-helmet'
-import Layout from '../templates/Layout'
-import Container from '../components/Container'
-import { withLoginStateContext } from '../contexes/LoginStateContext'
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
+import React from "react"
+import Helmet from "react-helmet"
+import Layout from "../templates/Layout"
+import Container from "../components/Container"
+import { withLoginStateContext } from "../contexes/LoginStateContext"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
 const IndexPage = () => (
   <Layout>
@@ -23,7 +23,7 @@ const IndexPage = () => (
           Ohjelmoinnin MOOCin kautta hakiessasi Sinun tulee täyttää päähaun
           hakulomake, jossa asetat Helsingin yliopiston tietojenkäsittelytieteen
           ohjelman haluamallesi prioriteetille. Löydät lisätietoja sähköisestä
-          yhteishausta korkeakouluihin{' '}
+          yhteishausta korkeakouluihin{" "}
           <OutboundLink
             href="https://opintopolku.fi/"
             target="_blank"
diff --git a/src/pages/osaamistavoitteet.js b/src/pages/osaamistavoitteet.js
index a70e253e..c152faef 100644
--- a/src/pages/osaamistavoitteet.js
+++ b/src/pages/osaamistavoitteet.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import Helmet from 'react-helmet'
+import React from "react"
+import Helmet from "react-helmet"
 
-import Layout from '../templates/Layout'
-import Container from '../components/Container'
-import { withLoginStateContext } from '../contexes/LoginStateContext'
+import Layout from "../templates/Layout"
+import Container from "../components/Container"
+import { withLoginStateContext } from "../contexes/LoginStateContext"
 
 import {
   Table,
@@ -11,7 +11,7 @@ import {
   TableCell,
   TableHead,
   TableRow,
-} from '@material-ui/core'
+} from "@material-ui/core"
 
 const IndexPage = () => (
   <Layout>
diff --git a/src/pages/profile.js b/src/pages/profile.js
index 2579c608..ce7589e0 100644
--- a/src/pages/profile.js
+++ b/src/pages/profile.js
@@ -1,21 +1,21 @@
-import React, { Fragment } from 'react'
-import Helmet from 'react-helmet'
-import styled from 'styled-components'
+import React, { Fragment } from "react"
+import Helmet from "react-helmet"
+import styled from "styled-components"
 
-import Layout from '../templates/Layout'
-import CourseOptionsEditor from '../components/user/CourseOptionsEditor'
-import { navigate } from 'gatsby'
+import Layout from "../templates/Layout"
+import CourseOptionsEditor from "../components/user/CourseOptionsEditor"
+import { navigate } from "gatsby"
 import LoginStateContext, {
   withLoginStateContext,
-} from '../contexes/LoginStateContext'
-import Container from '../components/Container'
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
+} from "../contexes/LoginStateContext"
+import Container from "../components/Container"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCheckCircle as icon } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faCheckCircle as icon } from "@fortawesome/free-solid-svg-icons"
 
-import Snackbar from '@material-ui/core/Snackbar'
-import SnackbarContent from '@material-ui/core/SnackbarContent'
+import Snackbar from "@material-ui/core/Snackbar"
+import SnackbarContent from "@material-ui/core/SnackbarContent"
 
 const StyledSnackbarContent = styled(SnackbarContent)`
   background-color: #43a047 !important;
@@ -33,7 +33,7 @@ class MissingInfo extends React.Component {
   }
 
   onStepComplete = () => {
-    this.setState({ successMessage: 'Tiedot tallennettu!' })
+    this.setState({ successMessage: "Tiedot tallennettu!" })
   }
 
   handleClose = () => {
@@ -42,8 +42,8 @@ class MissingInfo extends React.Component {
 
   render() {
     if (!this.context.loggedIn) {
-      if (typeof window !== 'undefined') {
-        navigate('/sign-in')
+      if (typeof window !== "undefined") {
+        navigate("/sign-in")
       }
       return <div>Redirecting...</div>
     }
@@ -55,7 +55,7 @@ class MissingInfo extends React.Component {
 
           <p>
             Täällä voit muokata mooc.fi -tilisi asetuksia tämän kurssin osalta.
-            Katso myös profiilisi mooc.fi:n Test My Code -palvelussa:{' '}
+            Katso myös profiilisi mooc.fi:n Test My Code -palvelussa:{" "}
             <OutboundLink href="https://tmc.mooc.fi" rel="noopener noreferrer">
               https://tmc.mooc.fi
             </OutboundLink>
@@ -65,8 +65,8 @@ class MissingInfo extends React.Component {
         </Container>
         <Snackbar
           anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'center',
+            vertical: "bottom",
+            horizontal: "center",
           }}
           open={this.state.successMessage}
           autoHideDuration={6000}
@@ -76,7 +76,7 @@ class MissingInfo extends React.Component {
             variant="success"
             message={
               <Fragment>
-                <StyledIcon icon={icon} />{' '}
+                <StyledIcon icon={icon} />{" "}
                 <span>{this.state.successMessage}</span>
               </Fragment>
             }
diff --git a/src/pages/sign-in.js b/src/pages/sign-in.js
index 1d4c1732..b1ac138e 100644
--- a/src/pages/sign-in.js
+++ b/src/pages/sign-in.js
@@ -1,16 +1,16 @@
-import React from 'react'
-import Helmet from 'react-helmet'
-import Layout from '../templates/Layout'
-import { authenticate } from '../services/moocfi'
-import { navigate, Link } from 'gatsby'
-import { TextField, Button } from '@material-ui/core'
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
+import React from "react"
+import Helmet from "react-helmet"
+import Layout from "../templates/Layout"
+import { authenticate } from "../services/moocfi"
+import { navigate, Link } from "gatsby"
+import { TextField, Button } from "@material-ui/core"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
-import styled from 'styled-components'
+import styled from "styled-components"
 import LoginStateContext, {
   withLoginStateContext,
-} from '../contexes/LoginStateContext'
-import Container from '../components/Container'
+} from "../contexes/LoginStateContext"
+import Container from "../components/Container"
 
 const Row = styled.div`
   margin-bottom: 1.5rem;
@@ -49,12 +49,12 @@ class SignInPage extends React.Component {
       })
       setTimeout(() => {
         // Give loginstate time to
-        if (typeof window !== 'undefined') {
-          console.log('Navigating back')
+        if (typeof window !== "undefined") {
+          console.log("Navigating back")
           window.history.back()
           return
         }
-        navigate('/')
+        navigate("/")
       }, 100)
     } catch (error) {
       this.setState({ error: true, submitting: false })
@@ -63,15 +63,15 @@ class SignInPage extends React.Component {
   }
 
   state = {
-    email: '',
-    password: '',
+    email: "",
+    password: "",
     submitting: false,
     error: false,
   }
 
   render() {
     if (this.context.loggedIn && !this.state.submitting) {
-      navigate('/')
+      navigate("/")
       return <div>Redirecting....</div>
     }
     return (
@@ -82,14 +82,14 @@ class SignInPage extends React.Component {
             <h1>Kirjaudu sisään</h1>
             <Form>
               <InfoBox>
-                Tämä kurssi käyttää{' '}
+                Tämä kurssi käyttää{" "}
                 <OutboundLink
                   href="https://mooc.fi"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
                   mooc.fi
-                </OutboundLink>{' '}
+                </OutboundLink>{" "}
                 käyttäjätunnuksia. Jos olet aikaisemmin tehnyt mooc.fi -kursseja
                 voit käyttää olemassaolevia tunnuksiasi.
               </InfoBox>
@@ -109,7 +109,7 @@ class SignInPage extends React.Component {
                 <TextField
                   id="outlined-adornment-password"
                   variant="outlined"
-                  type={this.state.showPassword ? 'text' : 'password'}
+                  type={this.state.showPassword ? "text" : "password"}
                   label="Salasana"
                   fullWidth
                   value={this.state.password}
diff --git a/src/pages/sign-up.js b/src/pages/sign-up.js
index 68073e13..d9da9e51 100644
--- a/src/pages/sign-up.js
+++ b/src/pages/sign-up.js
@@ -1,14 +1,14 @@
-import React from 'react'
-import Helmet from 'react-helmet'
+import React from "react"
+import Helmet from "react-helmet"
 
-import Layout from '../templates/Layout'
-import CreateAccountForm from '../components/user/CreateAccountForm'
-import CourseOptionsEditor from '../components/user/CourseOptionsEditor'
-import ConfirmEmail from '../components/user/ConfirmEmail'
+import Layout from "../templates/Layout"
+import CreateAccountForm from "../components/user/CreateAccountForm"
+import CourseOptionsEditor from "../components/user/CourseOptionsEditor"
+import ConfirmEmail from "../components/user/ConfirmEmail"
 import LoginStateContext, {
   withLoginStateContext,
-} from '../contexes/LoginStateContext'
-import Container from '../components/Container'
+} from "../contexes/LoginStateContext"
+import Container from "../components/Container"
 
 class SignInPage extends React.Component {
   static contextType = LoginStateContext
@@ -21,7 +21,7 @@ class SignInPage extends React.Component {
     this.setState(prevState => ({
       step: prevState.step + 1,
     }))
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       window.scrollTo(0, 0)
     }
   }
diff --git a/src/pages/tukivaylat.js b/src/pages/tukivaylat.js
index ac62f025..97e468ce 100644
--- a/src/pages/tukivaylat.js
+++ b/src/pages/tukivaylat.js
@@ -1,10 +1,10 @@
-import React from 'react'
-import Helmet from 'react-helmet'
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
+import React from "react"
+import Helmet from "react-helmet"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
-import Layout from '../templates/Layout'
-import Container from '../components/Container'
-import { withLoginStateContext } from '../contexes/LoginStateContext'
+import Layout from "../templates/Layout"
+import Container from "../components/Container"
+import { withLoginStateContext } from "../contexes/LoginStateContext"
 
 const IndexPage = () => (
   <Layout>
@@ -25,11 +25,11 @@ const IndexPage = () => (
       </p>
 
       <p>
-        Pääset kanavalle tästä linkistä:{' '}
+        Pääset kanavalle tästä linkistä:{" "}
         <OutboundLink href="https://t.me/ohjelmointi19">
           https://t.me/ohjelmointi19
         </OutboundLink>
-        . Pääset Telegrammin selaimessa toimivaan versioon täältä:{' '}
+        . Pääset Telegrammin selaimessa toimivaan versioon täältä:{" "}
         <OutboundLink href="https://web.telegram.org/">
           https://web.telegram.org
         </OutboundLink>
diff --git a/src/partials/CodeHighLight.js b/src/partials/CodeHighLight.js
index 38d11a9f..98fb6e75 100644
--- a/src/partials/CodeHighLight.js
+++ b/src/partials/CodeHighLight.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import PagesContext from '../contexes/PagesContext'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary';
+import React from "react"
+import PagesContext from "../contexes/PagesContext"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const CodeHighLight = () => <div>Test</div>
 
diff --git a/src/partials/CodeStatesVisualizer.js b/src/partials/CodeStatesVisualizer.js
index 2d9df796..fb882700 100644
--- a/src/partials/CodeStatesVisualizer.js
+++ b/src/partials/CodeStatesVisualizer.js
@@ -1,8 +1,8 @@
-import React, { lazy, Suspense } from 'react'
+import React, { lazy, Suspense } from "react"
 
-import 'code-states-visualizer/dist/app.css'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
-const CodeStatesVisualizer = lazy(() => import('code-states-visualizer'))
+import "code-states-visualizer/dist/app.css"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
+const CodeStatesVisualizer = lazy(() => import("code-states-visualizer"))
 
 class CodeStatesVisualizerWrapper extends React.Component {
   state = {
diff --git a/src/partials/Deadline.js b/src/partials/Deadline.js
index c0410619..6a760e32 100644
--- a/src/partials/Deadline.js
+++ b/src/partials/Deadline.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import styled from 'styled-components'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faClock as icon } from '@fortawesome/free-solid-svg-icons'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import styled from "styled-components"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faClock as icon } from "@fortawesome/free-solid-svg-icons"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const DeadlineWrapper = styled.div`
   margin-bottom: 1rem;
diff --git a/src/partials/ExercisesInThisSection/ExerciseSummary.js b/src/partials/ExercisesInThisSection/ExerciseSummary.js
index 4e7c6ac9..f22cae1e 100644
--- a/src/partials/ExercisesInThisSection/ExerciseSummary.js
+++ b/src/partials/ExercisesInThisSection/ExerciseSummary.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
-import styled from 'styled-components'
+import React from "react"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
+import styled from "styled-components"
 
 const ExerciseSummaryWrapper = styled.div`
   padding-left: 1rem;
@@ -8,8 +8,8 @@ const ExerciseSummaryWrapper = styled.div`
 `
 
 const ExerciseSummary = ({ exercise, index, quizIdToTitle }) => {
-  let description = 'Tuntematon tehtävätyyppi'
-  if (exercise.type === 'quiznator') {
+  let description = "Tuntematon tehtävätyyppi"
+  if (exercise.type === "quiznator") {
     const name = quizIdToTitle[exercise.id]
     if (name) {
       description = `Kysely: ${name}`
@@ -17,7 +17,7 @@ const ExerciseSummary = ({ exercise, index, quizIdToTitle }) => {
       description = "Kysely"
     }
   }
-  if (exercise.type === 'programming-exercise') {
+  if (exercise.type === "programming-exercise") {
     description = `Ohjelmointitehtävä: ${exercise.id}`
   }
   return (
diff --git a/src/partials/ExercisesInThisSection/index.js b/src/partials/ExercisesInThisSection/index.js
index 71160484..df7a3845 100644
--- a/src/partials/ExercisesInThisSection/index.js
+++ b/src/partials/ExercisesInThisSection/index.js
@@ -1,22 +1,22 @@
-import React from 'react'
-import PagesContext from '../../contexes/PagesContext'
-import { nthIndex } from '../../util/strings'
-import styled from 'styled-components'
-import ExpansionPanel from '@material-ui/core/ExpansionPanel'
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faAngleDown as icon } from '@fortawesome/free-solid-svg-icons'
+import React from "react"
+import PagesContext from "../../contexes/PagesContext"
+import { nthIndex } from "../../util/strings"
+import styled from "styled-components"
+import ExpansionPanel from "@material-ui/core/ExpansionPanel"
+import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"
+import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faAngleDown as icon } from "@fortawesome/free-solid-svg-icons"
 
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
-import ExerciseSummary from './ExerciseSummary'
-import { fetchManyQuizDetails } from '../../services/quiznator'
-import { flatten } from '../../util/arrays'
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
+import ExerciseSummary from "./ExerciseSummary"
+import { fetchManyQuizDetails } from "../../services/quiznator"
+import { flatten } from "../../util/arrays"
 
 const Title = styled.div`
   margin-bottom: 0.5em;
   color: rgba(0, 0, 0, 0.87);
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   font-weight: bold;
   font-size: 1.25rem;
   letter-spacing: 0em;
@@ -34,7 +34,7 @@ class ExercisesInThisSection extends React.Component {
     const value = this.context
     const currentPath = value.current.path
     let sectionPath = currentPath
-    const sectionSeparator = nthIndex(currentPath, '/', 2)
+    const sectionSeparator = nthIndex(currentPath, "/", 2)
     if (sectionSeparator !== -1) {
       sectionPath = currentPath.substr(0, sectionSeparator)
     }
@@ -50,7 +50,7 @@ class ExercisesInThisSection extends React.Component {
 
     const allExercises = flatten(sectionPages.map(page => page.exercises))
     const quizIds = allExercises
-      .filter(o => o.type === 'quiznator')
+      .filter(o => o.type === "quiznator")
       .map(o => o.id)
     const quizDetails = await fetchManyQuizDetails(quizIds)
     const quizIdToTitle = {}
diff --git a/src/partials/FloatImageRight.js b/src/partials/FloatImageRight.js
index fde48493..29d8d10e 100644
--- a/src/partials/FloatImageRight.js
+++ b/src/partials/FloatImageRight.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from 'styled-components'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import styled from "styled-components"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const FloatImageRightContainer = styled.div``
 
diff --git a/src/partials/PagesInThisSection.js b/src/partials/PagesInThisSection.js
index 6c77a8e7..bf6d29f5 100644
--- a/src/partials/PagesInThisSection.js
+++ b/src/partials/PagesInThisSection.js
@@ -1,11 +1,11 @@
-import React, { Fragment } from 'react'
-import PagesContext from '../contexes/PagesContext'
-import { nthIndex } from '../util/strings'
-import { Link } from 'gatsby'
-import styled from 'styled-components'
+import React, { Fragment } from "react"
+import PagesContext from "../contexes/PagesContext"
+import { nthIndex } from "../util/strings"
+import { Link } from "gatsby"
+import styled from "styled-components"
 
-import { Divider, Paper } from '@material-ui/core'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import { Divider, Paper } from "@material-ui/core"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const PagesList = styled.ol`
   padding-left: 0;
@@ -53,7 +53,7 @@ const Title = styled.div`
   margin-bottom: 0.35em;
   color: rgba(0, 0, 0, 0.87);
   font-size: 1.5em;
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
   font-weight: 400;
   line-height: 1.33;
   letter-spacing: 0em;
@@ -69,7 +69,7 @@ const PagesInThisSection = ({ style }) => (
     {value => {
       const currentPath = value.current.path
       let sectionPath = currentPath
-      const sectionSeparator = nthIndex(currentPath, '/', 2)
+      const sectionSeparator = nthIndex(currentPath, "/", 2)
       if (sectionSeparator !== -1) {
         sectionPath = currentPath.substr(0, sectionSeparator)
       }
diff --git a/src/partials/PdfSlideshow/PdfSlideshowLoader.js b/src/partials/PdfSlideshow/PdfSlideshowLoader.js
index 998dc7c1..0e1945ae 100644
--- a/src/partials/PdfSlideshow/PdfSlideshowLoader.js
+++ b/src/partials/PdfSlideshow/PdfSlideshowLoader.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import PdfSlideshow, { setPdfJsWorkerPath } from 'pdf-slideshow'
-import { withPrefix } from 'gatsby'
+import React from "react"
+import PdfSlideshow, { setPdfJsWorkerPath } from "pdf-slideshow"
+import { withPrefix } from "gatsby"
 
-setPdfJsWorkerPath(withPrefix('/pdf.worker.min.js'))
+setPdfJsWorkerPath(withPrefix("/pdf.worker.min.js"))
 
 export default props => <PdfSlideshow {...props} />
diff --git a/src/partials/PdfSlideshow/index.js b/src/partials/PdfSlideshow/index.js
index ec1c50c9..6eacb3a0 100644
--- a/src/partials/PdfSlideshow/index.js
+++ b/src/partials/PdfSlideshow/index.js
@@ -1,9 +1,9 @@
-import React, { Fragment, lazy, Suspense } from 'react'
-import { Paper } from '@material-ui/core'
-import styled from 'styled-components'
-import withSimpleErrorBoundary from '../../util/withSimpleErrorBoundary'
-import Loading from '../../components/Loading'
-const PdfSlideshow = lazy(() => import('./PdfSlideshowLoader'))
+import React, { Fragment, lazy, Suspense } from "react"
+import { Paper } from "@material-ui/core"
+import styled from "styled-components"
+import withSimpleErrorBoundary from "../../util/withSimpleErrorBoundary"
+import Loading from "../../components/Loading"
+const PdfSlideshow = lazy(() => import("./PdfSlideshowLoader"))
 
 const HiddenLinkWrapper = styled.div`
   display: none;
@@ -28,7 +28,7 @@ class PdfSlideshowWrapper extends React.Component {
 
   componentDidMount() {
     const links = this.linkContainer.current
-    const path = links.querySelector('a').href
+    const path = links.querySelector("a").href
     this.setState({ render: true, path })
   }
 
@@ -44,7 +44,7 @@ class PdfSlideshowWrapper extends React.Component {
       )
     }
     return (
-      <Suspense fallback={<div style={{ height: '540px' }}>Loading...</div>}>
+      <Suspense fallback={<div style={{ height: "540px" }}>Loading...</div>}>
         <StyledPaper>
           <PdfSlideshow slideWidth={800} pdfLocation={this.state.path} />
         </StyledPaper>
diff --git a/src/partials/PleaseLogin.js b/src/partials/PleaseLogin.js
index 72425be8..b26f7d8f 100644
--- a/src/partials/PleaseLogin.js
+++ b/src/partials/PleaseLogin.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import { Card, CardContent } from '@material-ui/core'
-import styled from 'styled-components'
-import LoginControls from '../components/LoginControls'
-import LoginStateContext from '../contexes/LoginStateContext'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import { Card, CardContent } from "@material-ui/core"
+import styled from "styled-components"
+import LoginControls from "../components/LoginControls"
+import LoginStateContext from "../contexes/LoginStateContext"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const PleaseLoginWrapper = styled(Card)`
   margin-bottom: 2rem;
diff --git a/src/partials/ProgrammingExercise.js b/src/partials/ProgrammingExercise.js
index 8cb6b7fc..a1c4ad4b 100644
--- a/src/partials/ProgrammingExercise.js
+++ b/src/partials/ProgrammingExercise.js
@@ -1,21 +1,21 @@
-import React, { Fragment } from 'react'
-import styled from 'styled-components'
+import React, { Fragment } from "react"
+import styled from "styled-components"
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPencilAlt as icon } from '@fortawesome/free-solid-svg-icons'
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faPencilAlt as icon } from "@fortawesome/free-solid-svg-icons"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
 import {
   fetchProgrammingExerciseDetails,
   fetchProgrammingExerciseModelSolution,
-} from '../services/moocfi'
-import { Button, Paper, Card, CardContent, Divider } from '@material-ui/core'
-import Modal from '@material-ui/core/Modal'
-import LoginStateContext from '../contexes/LoginStateContext'
-import LoginControls from '../components/LoginControls'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+} from "../services/moocfi"
+import { Button, Paper, Card, CardContent, Divider } from "@material-ui/core"
+import Modal from "@material-ui/core/Modal"
+import LoginStateContext from "../contexes/LoginStateContext"
+import LoginControls from "../components/LoginControls"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
-const accentColor = '#FAAA38'
+const accentColor = "#FAAA38"
 
 const ProgrammingExerciseWrapper = styled.section`
   padding 1rem;
@@ -123,7 +123,7 @@ class ProgrammingExercise extends React.Component {
     let exerciseDetails = null
     try {
       exerciseDetails = await fetchProgrammingExerciseDetails(
-        this.props.tmcname
+        this.props.tmcname,
       )
     } catch (error) {
       console.error(error)
@@ -138,13 +138,13 @@ class ProgrammingExercise extends React.Component {
       let modelSolution = this.state.modelSolution
       if (!modelSolution) {
         modelSolution = await fetchProgrammingExerciseModelSolution(
-          this.state.exerciseDetails.id
+          this.state.exerciseDetails.id,
         )
       }
 
       this.setState({ modelSolutionModalOpen: true, modelSolution })
     } catch (err) {
-      console.error('Could not fetch model solution', err)
+      console.error("Could not fetch model solution", err)
     }
   }
 
@@ -209,11 +209,11 @@ class ProgrammingExercise extends React.Component {
                       Joka kerta kun olet saanut <i>{tokenThreshHold}</i>:ta
                       tehtävää tehtyä, saat kolikon. Kolikoilla voi ostaa
                       tehtävien vastauksia ja lunastaa itsesi mahdollisesta
-                      jumista.{' '}
+                      jumista.{" "}
                       {availableTokens > 0 ? (
                         <span>
-                          {' '}
-                          Käytössäsi on tällä hetkellä {availableTokens}{' '}
+                          {" "}
+                          Käytössäsi on tällä hetkellä {availableTokens}{" "}
                           kolikkoa.
                         </span>
                       ) : (
@@ -261,7 +261,7 @@ class ProgrammingExercise extends React.Component {
                                 </CardContent>
                               </Card>
                             )
-                          }
+                          },
                         )}
                       </ModalContent>
                     )}
@@ -270,7 +270,7 @@ class ProgrammingExercise extends React.Component {
               )}
               <p>
                 Palauta tehtävä palvelimelle tarkistettavaksi Netbeans
-                ohjelmointiympäristössä:{' '}
+                ohjelmointiympäristössä:{" "}
                 <OutboundLink
                   href="https://materiaalit.github.io/tmc-asennus/netbeans/"
                   rel="noopener noreferrer"
@@ -282,7 +282,7 @@ class ProgrammingExercise extends React.Component {
               </p>
               <p>
                 Voit myöhemmin katsoa palautuksiasi Test My Code
-                palautusympäristössä{' '}
+                palautusympäristössä{" "}
                 <OutboundLink
                   href={`https://tmc.mooc.fi/exercises/${
                     this.state.exerciseDetails.id
diff --git a/src/partials/Quiznator.js b/src/partials/Quiznator.js
index 074aeab5..99a50521 100644
--- a/src/partials/Quiznator.js
+++ b/src/partials/Quiznator.js
@@ -1,6 +1,6 @@
-import React from 'react'
-import styled from 'styled-components'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import styled from "styled-components"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const QuiznatorWrapper = styled.div`
   code {
@@ -11,7 +11,7 @@ const QuiznatorWrapper = styled.div`
 class Quiznator extends React.Component {
   componentDidMount() {
     const { id } = this.props
-    if (!id || typeof window === 'undefined') {
+    if (!id || typeof window === "undefined") {
       return
     }
     if (!window.loadQuiz) {
diff --git a/src/partials/SampleOutput.js b/src/partials/SampleOutput.js
index 28921da5..5b49271f 100644
--- a/src/partials/SampleOutput.js
+++ b/src/partials/SampleOutput.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import styled from 'styled-components'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import styled from "styled-components"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
-const accentColor = '#CCC'
+const accentColor = "#CCC"
 
 const Wrapper = styled.div`
   padding 1rem;
diff --git a/src/partials/Table.js b/src/partials/Table.js
index 96f0ea97..aeb95900 100644
--- a/src/partials/Table.js
+++ b/src/partials/Table.js
@@ -1,13 +1,13 @@
-import React from 'react'
-import styled from 'styled-components'
-import Paper from '@material-ui/core/Paper'
-
-import MaterialTable from '@material-ui/core/Table'
-import MaterialTableBody from '@material-ui/core/TableBody'
-import MaterialTableCell from '@material-ui/core/TableCell'
-import MaterialTableHead from '@material-ui/core/TableHead'
-import MaterialTableRow from '@material-ui/core/TableRow'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import styled from "styled-components"
+import Paper from "@material-ui/core/Paper"
+
+import MaterialTable from "@material-ui/core/Table"
+import MaterialTableBody from "@material-ui/core/TableBody"
+import MaterialTableCell from "@material-ui/core/TableCell"
+import MaterialTableHead from "@material-ui/core/TableHead"
+import MaterialTableRow from "@material-ui/core/TableRow"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const StyledTableCell = styled(MaterialTableCell)`
   padding: 1rem !important;
diff --git a/src/partials/Test.js b/src/partials/Test.js
index 518a4b60..4c9bf251 100644
--- a/src/partials/Test.js
+++ b/src/partials/Test.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary';
+import React from "react"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
-const Test = (props) => {
+const Test = props => {
   return <pre>{JSON.stringify(props, null, 2)}</pre>
 }
 
diff --git a/src/partials/Test2.js b/src/partials/Test2.js
index 918adf25..c28d8df3 100644
--- a/src/partials/Test2.js
+++ b/src/partials/Test2.js
@@ -1,5 +1,5 @@
-import React from 'react'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const Test = props => {
   return <div>{props.children}</div>
diff --git a/src/partials/TextBox.js b/src/partials/TextBox.js
index 11a52070..5aa18eee 100644
--- a/src/partials/TextBox.js
+++ b/src/partials/TextBox.js
@@ -1,9 +1,9 @@
-import React from 'react'
-import styled from 'styled-components'
+import React from "react"
+import styled from "styled-components"
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faInfoCircle, faUserGraduate } from '@fortawesome/free-solid-svg-icons'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faInfoCircle, faUserGraduate } from "@fortawesome/free-solid-svg-icons"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 const Wrapper = styled.aside`
   padding 1rem;
@@ -32,8 +32,8 @@ const Body = styled.div`
 `
 
 const variantToColor = {
-  hint: '#528afc',
-  learningObjectives: '#57b181',
+  hint: "#528afc",
+  learningObjectives: "#57b181",
 }
 
 const variantToIcon = {
@@ -43,7 +43,7 @@ const variantToIcon = {
 
 const TextBox = props => {
   return (
-    <Wrapper style={{ '--color': variantToColor[props.variant] }}>
+    <Wrapper style={{ "--color": variantToColor[props.variant] }}>
       <Header>
         <StyledIcon icon={variantToIcon[props.variant]} size="1x" />
         {props.name}
diff --git a/src/partials/Youtube.js b/src/partials/Youtube.js
index eedd7cc4..36321166 100644
--- a/src/partials/Youtube.js
+++ b/src/partials/Youtube.js
@@ -1,32 +1,32 @@
-import React from 'react'
-import styled from 'styled-components'
-import ReduxActionAnalytics from 'redux-action-analytics'
-import * as storejs from 'store'
-import YouTube from 'react-youtube'
-import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
+import React from "react"
+import styled from "styled-components"
+import ReduxActionAnalytics from "redux-action-analytics"
+import * as storejs from "store"
+import YouTube from "react-youtube"
+import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
 
 let analytics = undefined
 
 initAnalytics()
 
 function initAnalytics() {
-  if (typeof window === 'undefined') {
+  if (typeof window === "undefined") {
     return
   }
   analytics = new ReduxActionAnalytics(
-    'https://usage.testmycode.io/api/v0/data',
-    'youtube-watch-stats',
-    'youtube-watch-stats',
+    "https://usage.testmycode.io/api/v0/data",
+    "youtube-watch-stats",
+    "youtube-watch-stats",
     10000,
     () => {
-      const user = storejs.get('tmc.user')
+      const user = storejs.get("tmc.user")
       if (user === undefined) {
         return {}
       }
       return {
         username: user.username,
       }
-    }
+    },
   )
 }
 
@@ -41,7 +41,7 @@ function onPlayerStateChange(event) {
 
 function onPlaybackRateChange(event) {
   const player = event.target
-  logAction('PLAYBACK_SPEED_CHANGED', player)
+  logAction("PLAYBACK_SPEED_CHANGED", player)
 }
 
 function logAction(action, player) {
@@ -83,8 +83,8 @@ const Youtube = props => {
         onStateChange={onPlayerStateChange}
         onPlaybackRateChange={onPlaybackRateChange}
         opts={{
-          height: '390',
-          width: '640',
+          height: "390",
+          width: "640",
           playerVars: {
             modestbranding: true,
           },
diff --git a/src/partials/index.js b/src/partials/index.js
index 7e323d33..c8825a4c 100644
--- a/src/partials/index.js
+++ b/src/partials/index.js
@@ -20,20 +20,20 @@
 
 // export default getNamedPartials
 
-import { OutboundLink } from 'gatsby-plugin-google-analytics'
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
-import Test from './Test'
-import PagesInThisSection from './PagesInThisSection'
-import ProgrammingExercise from './ProgrammingExercise'
-import TextBox from './TextBox'
-import SampleOutput from './SampleOutput'
-import Youtube from './Youtube'
-import Quiznator from './Quiznator'
-import PleaseLogin from './PleaseLogin'
-import FloatImageRight from './FloatImageRight'
-import CodeStatesVisualizer from './CodeStatesVisualizer'
-import PdfSlideshow from './PdfSlideshow'
-import ExercisesInThisSection from './ExercisesInThisSection'
+import Test from "./Test"
+import PagesInThisSection from "./PagesInThisSection"
+import ProgrammingExercise from "./ProgrammingExercise"
+import TextBox from "./TextBox"
+import SampleOutput from "./SampleOutput"
+import Youtube from "./Youtube"
+import Quiznator from "./Quiznator"
+import PleaseLogin from "./PleaseLogin"
+import FloatImageRight from "./FloatImageRight"
+import CodeStatesVisualizer from "./CodeStatesVisualizer"
+import PdfSlideshow from "./PdfSlideshow"
+import ExercisesInThisSection from "./ExercisesInThisSection"
 
 import {
   Table,
@@ -42,20 +42,20 @@ import {
   TableHead,
   TableRow,
   TableTh,
-} from './Table'
-import Deadline from './Deadline'
+} from "./Table"
+import Deadline from "./Deadline"
 
 const mapping = {
   test: Test,
-  'pages-in-this-section': PagesInThisSection,
-  'programming-exercise': ProgrammingExercise,
-  'text-box': TextBox,
-  'sample-output': SampleOutput,
-  'please-login': PleaseLogin,
-  'float-image-right': FloatImageRight,
-  'code-states-visualizer': CodeStatesVisualizer,
-  'pdf-slideshow': PdfSlideshow,
-  'exercises-in-this-section': ExercisesInThisSection,
+  "pages-in-this-section": PagesInThisSection,
+  "programming-exercise": ProgrammingExercise,
+  "text-box": TextBox,
+  "sample-output": SampleOutput,
+  "please-login": PleaseLogin,
+  "float-image-right": FloatImageRight,
+  "code-states-visualizer": CodeStatesVisualizer,
+  "pdf-slideshow": PdfSlideshow,
+  "exercises-in-this-section": ExercisesInThisSection,
   youtube: Youtube,
   quiznator: Quiznator,
   table: Table,
diff --git a/src/services/moocfi.js b/src/services/moocfi.js
index 6552d87c..f39546b6 100644
--- a/src/services/moocfi.js
+++ b/src/services/moocfi.js
@@ -1,17 +1,17 @@
-import TmcClient from 'tmc-client-js'
-import fetchPonyfill from 'fetch-ponyfill'
-import axios from 'axios'
-import * as store from 'store'
-import uuidv4 from 'uuid/v4'
+import TmcClient from "tmc-client-js"
+import fetchPonyfill from "fetch-ponyfill"
+import axios from "axios"
+import * as store from "store"
+import uuidv4 from "uuid/v4"
 
 const { fetch } = fetchPonyfill()
-const BASE_URL = 'https://tmc.mooc.fi/api/v8'
-const ORGANIZATION = 'mooc'
-const COURSE = '2019-ohjelmointi'
+const BASE_URL = "https://tmc.mooc.fi/api/v8"
+const ORGANIZATION = "mooc"
+const COURSE = "2019-ohjelmointi"
 
 const tmcClient = new TmcClient(
-  '59a09eef080463f90f8c2f29fbf63014167d13580e1de3562e57b9e6e4515182',
-  '2ddf92a15a31f87c1aabb712b7cfd1b88f3465465ec475811ccce6febb1bad28'
+  "59a09eef080463f90f8c2f29fbf63014167d13580e1de3562e57b9e6e4515182",
+  "2ddf92a15a31f87c1aabb712b7cfd1b88f3465465ec475811ccce6febb1bad28",
 )
 
 const loginStateListeners = []
@@ -21,8 +21,8 @@ export function authenticate(credentials) {
     tmcClient.authenticate(credentials).then(
       res => {
         if (
-          typeof window !== 'undefined' &&
-          typeof window.Quiznator !== 'undefined'
+          typeof window !== "undefined" &&
+          typeof window.Quiznator !== "undefined"
         ) {
           window.Quiznator.setUser({
             id: res.username,
@@ -34,7 +34,7 @@ export function authenticate(credentials) {
       },
       err => {
         reject(err)
-      }
+      },
     )
   })
 }
@@ -43,15 +43,15 @@ export function createAccount(data) {
   data.username = uuidv4()
   const body = {
     user: data,
-    origin: 'Ohjelmoinnin MOOC 2019',
-    language: 'fi',
+    origin: "Ohjelmoinnin MOOC 2019",
+    language: "fi",
   }
   return new Promise((resolve, reject) => {
     fetch(`${BASE_URL}/users`, {
       body: JSON.stringify(body),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
     }).then(res => {
       res.json().then(json => {
@@ -69,9 +69,9 @@ export function resetPassword(email) {
   return new Promise((resolve, reject) => {
     fetch(`${BASE_URL}/users/password_reset`, {
       body: JSON.stringify({ email: email, origin: window.location.host }),
-      method: 'POST',
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
     }).then(res => {
       res.json().then(json => {
@@ -87,13 +87,13 @@ export function loggedIn() {
 
 export function signOut() {
   if (
-    typeof window !== 'undefined' &&
-    typeof window.Quiznator !== 'undefined'
+    typeof window !== "undefined" &&
+    typeof window.Quiznator !== "undefined"
   ) {
     window.Quiznator.removeUser()
   }
-  store.remove('tmc.user')
-  store.remove('tmc.user.details')
+  store.remove("tmc.user")
+  store.remove("tmc.user.details")
   loginStateChanged()
 }
 
@@ -106,17 +106,17 @@ export async function userDetails() {
     `${BASE_URL}/users/current?show_user_fields=true&extra_fields=ohjelmoinnin-mooc-2019`,
     {
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
         Authorization: `Bearer ${accessToken()}`,
       },
-    }
+    },
   )
-  store.set('tmc.user.details', res.data)
+  store.set("tmc.user.details", res.data)
   return res.data
 }
 
 export async function getCachedUserDetails() {
-  let details = store.get('tmc.user.details')
+  let details = store.get("tmc.user.details")
   if (!details) {
     details = await userDetails()
   }
@@ -131,11 +131,11 @@ const setPasswordFields = (
   user,
   currentPassword,
   password,
-  confirmPassword
+  confirmPassword,
 ) => {
-  user['old_password'] = currentPassword
-  user['password'] = password
-  user['password_repeat'] = confirmPassword
+  user["old_password"] = currentPassword
+  user["password"] = password
+  user["password_repeat"] = confirmPassword
 }
 
 export async function updateUserDetails({ extraFields, userField }) {
@@ -144,13 +144,13 @@ export async function updateUserDetails({ extraFields, userField }) {
     {
       user: {
         extra_fields: {
-          namespace: 'ohjelmoinnin-mooc-2019',
+          namespace: "ohjelmoinnin-mooc-2019",
           data: extraFields,
         },
       },
       user_field: userField,
     },
-    { headers: { Authorization: `Bearer ${accessToken()}` } }
+    { headers: { Authorization: `Bearer ${accessToken()}` } },
   )
   await userDetails()
   return res
@@ -158,7 +158,7 @@ export async function updateUserDetails({ extraFields, userField }) {
 
 export function updatePassword(currentPassword, password, confirmPassword) {
   setPasswordFields(userDetails, currentPassword, password, confirmPassword)
-  const id = userDetails['id']
+  const id = userDetails["id"]
 
   return axios
     .put(`${BASE_URL}/users/${id}`, userDetails, { headers: createHeader() })
@@ -175,10 +175,10 @@ export async function fetchProgrammingExerciseDetails(exerciseName) {
     `${BASE_URL}/org/${ORGANIZATION}/courses/${COURSE}/exercises/${exerciseName}`,
     {
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
         Authorization: `Bearer ${accessToken()}`,
       },
-    }
+    },
   )
   return res.data
 }
@@ -188,17 +188,17 @@ export async function fetchProgrammingExerciseModelSolution(exerciseId) {
     `${BASE_URL}/exercises/${exerciseId}/model_solutions`,
     {
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
         Authorization: `Bearer ${accessToken()}`,
       },
-    }
+    },
   )
   return res.data
 }
 
 export function canDoResearch() {
   try {
-    return store.get('tmc.user.details')?.extra_fields?.research === '1'
+    return store.get("tmc.user.details")?.extra_fields?.research === "1"
   } catch (error) {
     return false
   }
@@ -212,7 +212,7 @@ function loginStateChanged() {
 
 export function accessToken() {
   try {
-    return store.get('tmc.user').accessToken || null
+    return store.get("tmc.user").accessToken || null
   } catch (error) {
     return null
   }
diff --git a/src/services/quiznator.js b/src/services/quiznator.js
index 36021fc3..bcb097de 100644
--- a/src/services/quiznator.js
+++ b/src/services/quiznator.js
@@ -1,13 +1,13 @@
-import axios from 'axios'
-import { accessToken } from './moocfi'
+import axios from "axios"
+import { accessToken } from "./moocfi"
 
-const BASE_URL = 'https://quiznator.mooc.fi'
+const BASE_URL = "https://quiznator.mooc.fi"
 
 export async function fetchManyQuizDetails(quizIds) {
   const res = await axios.post(
     `${BASE_URL}/api/v1/quizzes/stripped`,
     { quizIds },
-    { headers: { Authorization: `Bearer ${accessToken()}` } }
+    { headers: { Authorization: `Bearer ${accessToken()}` } },
   )
   return res.data
 }
diff --git a/src/templates/CourseContentTemplate.js b/src/templates/CourseContentTemplate.js
index 544e6834..eb91bb6b 100644
--- a/src/templates/CourseContentTemplate.js
+++ b/src/templates/CourseContentTemplate.js
@@ -1,27 +1,27 @@
-import React, { Fragment } from 'react'
-import { graphql } from 'gatsby'
-import styled from 'styled-components'
-import rehypeReact from 'rehype-react'
-import { navigate, Link } from 'gatsby'
-import { Helmet } from 'react-helmet'
+import React, { Fragment } from "react"
+import { graphql } from "gatsby"
+import styled from "styled-components"
+import rehypeReact from "rehype-react"
+import { navigate, Link } from "gatsby"
+import { Helmet } from "react-helmet"
 
-import Layout from './Layout'
+import Layout from "./Layout"
 
-import getNamedPartials from '../partials'
-import CoursePageFooter from '../components/CoursePageFooter'
-import { getCachedUserDetails } from '../services/moocfi'
-import './remark.css'
-import PagesContext from '../contexes/PagesContext'
+import getNamedPartials from "../partials"
+import CoursePageFooter from "../components/CoursePageFooter"
+import { getCachedUserDetails } from "../services/moocfi"
+import "./remark.css"
+import PagesContext from "../contexes/PagesContext"
 import LoginStateContext, {
   LoginStateContextProvider,
-} from '../contexes/LoginStateContext'
-import Container from '../components/Container'
+} from "../contexes/LoginStateContext"
+import Container from "../components/Container"
 
-import { loggedIn } from '../services/moocfi'
-import { capitalizeFirstLetter } from '../util/strings'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowCircleUp as icon } from '@fortawesome/free-solid-svg-icons'
-import EndOfSubSection from '../components/EndOfSubSection'
+import { loggedIn } from "../services/moocfi"
+import { capitalizeFirstLetter } from "../util/strings"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faArrowCircleUp as icon } from "@fortawesome/free-solid-svg-icons"
+import EndOfSubSection from "../components/EndOfSubSection"
 
 const StyledIcon = styled(FontAwesomeIcon)`
   margin-right: 0.25rem;
@@ -53,7 +53,7 @@ export default class CourseContentTemplate extends React.Component {
     let userInfo = await getCachedUserDetails()
     const research = userInfo?.extra_fields?.research
     if (research === undefined) {
-      navigate('/missing-info')
+      navigate("/missing-info")
     }
   }
 
@@ -68,7 +68,7 @@ export default class CourseContentTemplate extends React.Component {
     }).Compiler
 
     const parentSectionName = capitalizeFirstLetter(
-      `${frontmatter.path.split(/\//g)[1].replace(/-/g, ' ')}`
+      `${frontmatter.path.split(/\//g)[1].replace(/-/g, " ")}`,
     )
     const parentSectionPath = `/${frontmatter.path.split(/\//g)[1]}`
     return (
diff --git a/src/templates/CoursePartOverviewTemplate.js b/src/templates/CoursePartOverviewTemplate.js
index eeead24f..35846772 100644
--- a/src/templates/CoursePartOverviewTemplate.js
+++ b/src/templates/CoursePartOverviewTemplate.js
@@ -1,22 +1,22 @@
-import React, { Fragment } from 'react'
-import { graphql } from 'gatsby'
-import styled from 'styled-components'
-import rehypeReact from 'rehype-react'
-import { navigate } from 'gatsby'
-import { Helmet } from 'react-helmet'
+import React, { Fragment } from "react"
+import { graphql } from "gatsby"
+import styled from "styled-components"
+import rehypeReact from "rehype-react"
+import { navigate } from "gatsby"
+import { Helmet } from "react-helmet"
 
-import Layout from './Layout'
+import Layout from "./Layout"
 
-import getNamedPartials from '../partials'
-import { getCachedUserDetails } from '../services/moocfi'
-import './remark.css'
-import PagesContext from '../contexes/PagesContext'
+import getNamedPartials from "../partials"
+import { getCachedUserDetails } from "../services/moocfi"
+import "./remark.css"
+import PagesContext from "../contexes/PagesContext"
 import LoginStateContext, {
   LoginStateContextProvider,
-} from '../contexes/LoginStateContext'
-import Container from '../components/Container'
+} from "../contexes/LoginStateContext"
+import Container from "../components/Container"
 
-import { loggedIn } from '../services/moocfi'
+import { loggedIn } from "../services/moocfi"
 
 const ContentWrapper = styled.div`
   margin-top: 1rem;
@@ -40,7 +40,7 @@ export default class CoursePartOverviewTemplate extends React.Component {
     let userInfo = await getCachedUserDetails()
     const research = userInfo?.extra_fields?.research
     if (research === undefined) {
-      navigate('/missing-info')
+      navigate("/missing-info")
     }
   }
 
diff --git a/src/templates/Layout.js b/src/templates/Layout.js
index 03c7df32..258fd0d2 100644
--- a/src/templates/Layout.js
+++ b/src/templates/Layout.js
@@ -1,29 +1,29 @@
-import React, { Fragment } from 'react'
-import Helmet from 'react-helmet'
-import Sidebar from '../components/Sidebar'
-import ContentArea from '../components/ContentArea'
-import TopBar from '../components/TopBar'
-import { StaticQuery, graphql } from 'gatsby'
-import * as store from 'store'
-import withMaterialUiRoot from './withMaterialUiRoot'
-import Pheromones from '../util/pheromones'
-import styled from 'styled-components'
+import React, { Fragment } from "react"
+import Helmet from "react-helmet"
+import Sidebar from "../components/Sidebar"
+import ContentArea from "../components/ContentArea"
+import TopBar from "../components/TopBar"
+import { StaticQuery, graphql } from "gatsby"
+import * as store from "store"
+import withMaterialUiRoot from "./withMaterialUiRoot"
+import Pheromones from "../util/pheromones"
+import styled from "styled-components"
 
-import courseMetaData from '../../course-metadata.json'
+import courseMetaData from "../../course-metadata.json"
 
-import './reboot.css'
-import './theme.css'
-import './remark.css'
-import 'focus-visible'
-import 'typeface-open-sans'
-import 'typeface-roboto-slab'
-import 'typeface-roboto-mono'
-import '@fortawesome/fontawesome-svg-core/styles.css'
+import "./reboot.css"
+import "./theme.css"
+import "./remark.css"
+import "focus-visible"
+import "typeface-open-sans"
+import "typeface-roboto-slab"
+import "typeface-roboto-mono"
+import "@fortawesome/fontawesome-svg-core/styles.css"
 
-import { config as fontAwesomeConfig } from '@fortawesome/fontawesome-svg-core'
-import { canDoResearch } from '../services/moocfi'
-import Footer from '../components/Footer'
-import PointsBalloon from '../components/PointsBalloon'
+import { config as fontAwesomeConfig } from "@fortawesome/fontawesome-svg-core"
+import { canDoResearch } from "../services/moocfi"
+import Footer from "../components/Footer"
+import PointsBalloon from "../components/PointsBalloon"
 
 fontAwesomeConfig.autoAddCss = false
 
@@ -52,10 +52,10 @@ class Layout extends React.Component {
   }
 
   componentDidMount() {
-    const user = store.get('tmc.user')
-    if (typeof window !== 'undefined' && user) {
-      if (typeof window.Quiznator === 'undefined') {
-        document.addEventListener('quiznatorLoaded', () => {
+    const user = store.get("tmc.user")
+    if (typeof window !== "undefined" && user) {
+      if (typeof window.Quiznator === "undefined") {
+        document.addEventListener("quiznatorLoaded", () => {
           this.setQuiznatorUser(user)
         })
       } else {
@@ -64,7 +64,7 @@ class Layout extends React.Component {
       if (canDoResearch()) {
         setTimeout(() => {
           this.removePheromones = Pheromones.init({
-            apiUrl: 'https://data.pheromones.io/',
+            apiUrl: "https://data.pheromones.io/",
             username: user.username,
             submitAfter: 20,
           })
@@ -75,8 +75,8 @@ class Layout extends React.Component {
 
   componentWillUnmount() {
     if (
-      typeof window === 'undefined' ||
-      typeof this.removePheromones === 'undefined'
+      typeof window === "undefined" ||
+      typeof this.removePheromones === "undefined"
     ) {
       return
     }
@@ -115,14 +115,14 @@ class Layout extends React.Component {
                   titleTemplate={`%s - ${siteTitle}`}
                   meta={[
                     {
-                      name: 'description',
+                      name: "description",
                       content:
-                        'Helsingin yliopiston kaikille avoin ja ilmainen ohjelmoinnin perusteet opettava verkkokurssi. Kurssilla perehdytään nykyaikaisen ohjelmoinnin perusideoihin sekä ohjelmoinnissa käytettävien työvälineiden lisäksi algoritmien laatimiseen. Kurssille osallistuminen ei vaadi ennakkotietoja ohjelmoinnista.',
+                        "Helsingin yliopiston kaikille avoin ja ilmainen ohjelmoinnin perusteet opettava verkkokurssi. Kurssilla perehdytään nykyaikaisen ohjelmoinnin perusideoihin sekä ohjelmoinnissa käytettävien työvälineiden lisäksi algoritmien laatimiseen. Kurssille osallistuminen ei vaadi ennakkotietoja ohjelmoinnista.",
                     },
                     {
-                      name: 'keywords',
+                      name: "keywords",
                       content:
-                        'ohjelmointi, java, programming, CS1, MOOC, 2019, ohjelmointikurssi, avoin, ilmainen, helsingin yliopisto',
+                        "ohjelmointi, java, programming, CS1, MOOC, 2019, ohjelmointikurssi, avoin, ilmainen, helsingin yliopisto",
                     },
                   ]}
                 />
diff --git a/src/templates/withMaterialUiRoot.js b/src/templates/withMaterialUiRoot.js
index e8c1e7d9..c45b0499 100644
--- a/src/templates/withMaterialUiRoot.js
+++ b/src/templates/withMaterialUiRoot.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import { MuiThemeProvider } from '@material-ui/core/styles'
-import CssBaseline from '@material-ui/core/CssBaseline'
-import JssProvider from 'react-jss/lib/JssProvider'
-import getPageContext from '../getPageContext'
+import React from "react"
+import { MuiThemeProvider } from "@material-ui/core/styles"
+import CssBaseline from "@material-ui/core/CssBaseline"
+import JssProvider from "react-jss/lib/JssProvider"
+import getPageContext from "../getPageContext"
 
 function withMaterialUiRoot(Component) {
   class WithRoot extends React.Component {
@@ -13,7 +13,7 @@ function withMaterialUiRoot(Component) {
 
     componentDidMount() {
       // Remove the server-side injected CSS.
-      const jssStyles = document.querySelector('#jss-server-side')
+      const jssStyles = document.querySelector("#jss-server-side")
       if (jssStyles && jssStyles.parentNode) {
         jssStyles.parentNode.removeChild(jssStyles)
       }
diff --git a/src/util/arrays.js b/src/util/arrays.js
index 0c3b1718..fb1bb360 100644
--- a/src/util/arrays.js
+++ b/src/util/arrays.js
@@ -1,7 +1,7 @@
 export function flatten(arr) {
   return arr.reduce(function(flat, toFlatten) {
     return flat.concat(
-      Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten
+      Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten,
     )
   }, [])
 }
diff --git a/src/util/pheromones.js b/src/util/pheromones.js
index 86e7bfec..0ee79945 100644
--- a/src/util/pheromones.js
+++ b/src/util/pheromones.js
@@ -1,13 +1,13 @@
-import $ from 'jquery'
+import $ from "jquery"
 
 let Visibility = null
 try {
-  Visibility = require('visibilityjs')
+  Visibility = require("visibilityjs")
 } catch (error) {}
 
 const pheromones = {
-  CLASS_PREFIX: 'PS-',
-  API_URL: 'https://data.pheromones.io/',
+  CLASS_PREFIX: "PS-",
+  API_URL: "https://data.pheromones.io/",
   user: null,
   timer: null,
   IDLE_MODE: false,
@@ -30,17 +30,17 @@ const pheromones = {
   intervals: [],
   init: function(options) {
     var elementCount = -1
-    $('.content-area')
-      .find('*')
+    $(".content-area")
+      .find("*")
       .each(function() {
         if (
-          !$(this).is('table') &&
-          !$(this).is('p') &&
-          !$(this).is('pre') &&
-          !$(this).is('img') &&
-          !$(this).is('ul') &&
-          !$(this).is('ol') &&
-          !$(this).is('.material-heading')
+          !$(this).is("table") &&
+          !$(this).is("p") &&
+          !$(this).is("pre") &&
+          !$(this).is("img") &&
+          !$(this).is("ul") &&
+          !$(this).is("ol") &&
+          !$(this).is(".material-heading")
         ) {
           return
         }
@@ -80,7 +80,7 @@ const pheromones = {
       pheromones.storage.submit()
     }, 10)
 
-    window.removeEventListener('scroll', pheromones.onScroll, false)
+    window.removeEventListener("scroll", pheromones.onScroll, false)
     pheromones.intervals.forEach(interval => {
       clearInterval(interval)
     })
@@ -94,14 +94,14 @@ const pheromones = {
   },
   initTimer: function() {
     const interval = setInterval(() => {
-      pheromones.storage.addLocation('tick')
+      pheromones.storage.addLocation("tick")
     }, pheromones.TICK_LENGTH)
     pheromones.intervals.push(interval)
   },
   bindMouseClicks: function() {
     $(document).click(function(event) {
-      var hash = $(event.target).attr('data-hash')
-      if (typeof hash === 'undefined') {
+      var hash = $(event.target).attr("data-hash")
+      if (typeof hash === "undefined") {
         return
       }
 
@@ -121,11 +121,11 @@ const pheromones = {
   bindWindowActivity: function() {
     // requires Visiblity.js
     Visibility.change(function(e, state) {
-      if (state === 'visible') {
+      if (state === "visible") {
         pheromones.IDLE_MODE = false
-        pheromones.storage.addLocation('visibility-change-show')
-      } else if (state === 'hidden') {
-        pheromones.storage.addLocation('visibility-change-hide')
+        pheromones.storage.addLocation("visibility-change-show")
+      } else if (state === "hidden") {
+        pheromones.storage.addLocation("visibility-change-hide")
         pheromones.IDLE_MODE = true
       }
     })
@@ -136,13 +136,13 @@ const pheromones = {
 
     var firstVisible = pheromones.fn.getTopmostVisibleElement(
       state.FIRST_VISIBLE,
-      state.PAGETOP_Y > window.pageYOffset
+      state.PAGETOP_Y > window.pageYOffset,
     )
 
     if (firstVisible >= 0) {
       state.FIRST_VISIBLE = firstVisible
       state.LAST_VISIBLE = pheromones.fn.getBottommostVisibleElement(
-        state.FIRST_VISIBLE
+        state.FIRST_VISIBLE,
       )
     }
 
@@ -158,12 +158,12 @@ const pheromones = {
     if (!scroll.scrollTimer) {
       if (now - scroll.lastScrollFireTime > 3 * minScrollTime) {
         scroll.lastScrollFireTime = now
-        pheromones.storage.addLocation('scroll')
+        pheromones.storage.addLocation("scroll")
       }
       scroll.scrollTimer = setTimeout(function() {
         scroll.scrollTimer = null
         scroll.lastScrollFireTime = pheromones.fn.getTime()
-        pheromones.storage.addLocation('scroll')
+        pheromones.storage.addLocation("scroll")
       }, minScrollTime)
     }
   },
@@ -172,11 +172,7 @@ const pheromones = {
     scrollTimer: 0,
     lastScrollFireTime: 0,
     bindScroll: function() {
-      window.addEventListener(
-        'scroll',
-        pheromones.onScroll,
-        false
-      )
+      window.addEventListener("scroll", pheromones.onScroll, false)
     },
   },
   storage: {
@@ -202,24 +198,24 @@ const pheromones = {
         return
       }
 
-      localStorage['pheromones.data'] = JSON.stringify(pheromones.storage.data)
+      localStorage["pheromones.data"] = JSON.stringify(pheromones.storage.data)
     },
     init: function() {
       if (
         !pheromones.storage.hasLocalStorageSupport() ||
-        !localStorage['pheromones.data']
+        !localStorage["pheromones.data"]
       ) {
         pheromones.storage.data = []
         return
       }
 
-      pheromones.storage.data = JSON.parse(localStorage['pheromones.data'])
+      pheromones.storage.data = JSON.parse(localStorage["pheromones.data"])
     },
     initPage: function() {
       pheromones.storage.init()
 
       var vis = {
-        event_type: 'init',
+        event_type: "init",
         page_url: window.location.origin + window.location.pathname,
         snapshot_time: pheromones.fn.getTime(),
         user_id: pheromones.user,
@@ -282,8 +278,8 @@ const pheromones = {
         first_visible_elem: start,
         last_visible_elem: end,
         top_y: pheromones.state.PAGETOP_Y,
-        first_elem_hash: $(pheromones.CLASS_PREFIX + start).attr('data-hash'),
-        last_elem_hash: $(pheromones.CLASS_PREFIX + end).attr('data-hash'),
+        first_elem_hash: $(pheromones.CLASS_PREFIX + start).attr("data-hash"),
+        last_elem_hash: $(pheromones.CLASS_PREFIX + end).attr("data-hash"),
         page_url: window.location.origin + window.location.pathname,
         snapshot_time: pheromones.fn.getTime(),
         user_id: pheromones.user,
@@ -310,13 +306,13 @@ const pheromones = {
       }
 
       var vis = {
-        event_type: 'click',
+        event_type: "click",
         metadata: clickInformation,
         first_visible_elem: start,
         last_visible_elem: end,
         top_y: pheromones.state.PAGETOP_Y,
-        first_elem_hash: $(pheromones.CLASS_PREFIX + start).attr('data-hash'),
-        last_elem_hash: $(pheromones.CLASS_PREFIX + end).attr('data-hash'),
+        first_elem_hash: $(pheromones.CLASS_PREFIX + start).attr("data-hash"),
+        last_elem_hash: $(pheromones.CLASS_PREFIX + end).attr("data-hash"),
         page_url: window.location.origin + window.location.pathname,
         snapshot_time: pheromones.fn.getTime(),
         user_id: pheromones.user,
@@ -339,15 +335,15 @@ const pheromones = {
 
       pheromones.storage.clear()
 
-      $.post(pheromones.API_URL + 'snapshots.json', {
+      $.post(pheromones.API_URL + "snapshots.json", {
         list: dataToSubmit,
       })
         .done(function(data) {})
         .fail(function(details) {
           if (
             details.status === 200 &&
-            details.statusText === 'OK' &&
-            details.responseText === '{success:true}'
+            details.statusText === "OK" &&
+            details.responseText === "{success:true}"
           ) {
             return
           }
@@ -357,7 +353,7 @@ const pheromones = {
     },
     hasLocalStorageSupport: function() {
       try {
-        return 'localStorage' in window && window['localStorage'] !== null
+        return "localStorage" in window && window["localStorage"] !== null
       } catch (e) {
         return false
       }
@@ -382,7 +378,7 @@ const pheromones = {
           return -1
         }
 
-        var element = $('.' + pheromones.CLASS_PREFIX + index)
+        var element = $("." + pheromones.CLASS_PREFIX + index)
         if (element.length <= 0) {
           if (forward) {
             index = 0
@@ -437,7 +433,7 @@ const pheromones = {
 
       var lastVisible = -1
       while (true) {
-        var element = $('.' + pheromones.CLASS_PREFIX + index)
+        var element = $("." + pheromones.CLASS_PREFIX + index)
         if (element.length <= 0) {
           return lastVisible
         }
diff --git a/src/util/strings.js b/src/util/strings.js
index 64b30c02..6c407b86 100644
--- a/src/util/strings.js
+++ b/src/util/strings.js
@@ -1,13 +1,13 @@
-export function nthIndex(str, pat, n){
-  var L= str.length, i= -1;
-  while(n-- && i++<L){
-      i= str.indexOf(pat, i);
-      if (i < 0) break;
+export function nthIndex(str, pat, n) {
+  var L = str.length,
+    i = -1
+  while (n-- && i++ < L) {
+    i = str.indexOf(pat, i)
+    if (i < 0) break
   }
-  return i;
+  return i
 }
 
-
 export function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
+  return string.charAt(0).toUpperCase() + string.slice(1)
 }
diff --git a/src/util/trackHeight.js b/src/util/trackHeight.js
index cf1671c0..4a7dd218 100644
--- a/src/util/trackHeight.js
+++ b/src/util/trackHeight.js
@@ -1,5 +1,5 @@
 // Used for animations
-import { createGlobalStyle } from "styled-components";
+import { createGlobalStyle } from "styled-components"
 
 createGlobalStyle`
   .render-element-off-screen-for-measurement {
@@ -7,45 +7,45 @@ createGlobalStyle`
     top: -100000px !important;
     height: auto !important;
   }
-`;
+`
 
 const saveHeight = (element, height) => {
-  element.style.setProperty("--calculated-height", height);
-};
+  element.style.setProperty("--calculated-height", height)
+}
 
 const calculateElementHeightOffScreen = element => {
   return new Promise(resolve => {
-    element.classList.add("render-element-off-screen-for-measurement");
+    element.classList.add("render-element-off-screen-for-measurement")
     setTimeout(() => {
-      const height = element.getBoundingClientRect().height;
-      element.classList.remove("render-element-off-screen-for-measurement");
-      resolve(height);
-    }, 100);
-  });
-};
+      const height = element.getBoundingClientRect().height
+      element.classList.remove("render-element-off-screen-for-measurement")
+      resolve(height)
+    }, 100)
+  })
+}
 
 const calculateElementHeight = async element => {
-  let { height } = element.getBoundingClientRect();
+  let { height } = element.getBoundingClientRect()
   if (height === 0) {
-    height = await calculateElementHeightOffScreen(element);
+    height = await calculateElementHeightOffScreen(element)
   }
-  saveHeight(element, height);
-};
+  saveHeight(element, height)
+}
 
 export const trackElementHeight = element => {
   if (element === null) {
-    return;
+    return
   }
-  element.classList.add("track-element-height-changes-for-animations");
-  calculateElementHeight(element);
-};
+  element.classList.add("track-element-height-changes-for-animations")
+  calculateElementHeight(element)
+}
 
 export default () => {
   window.addEventListener("resize", () => {
     document
       .querySelectorAll(".track-element-height-changes-for-animations")
       .forEach(e => {
-        calculateElementHeight(e);
-      });
-  });
-};
+        calculateElementHeight(e)
+      })
+  })
+}
diff --git a/src/util/withSimpleErrorBoundary.js b/src/util/withSimpleErrorBoundary.js
index bb5f2e06..1b1119cd 100644
--- a/src/util/withSimpleErrorBoundary.js
+++ b/src/util/withSimpleErrorBoundary.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from "react"
 
 export default function withSimpleErrorBoundary(Component) {
   class SimpleErrorBoundary extends React.Component {