test pug and sass

index.html

<div id="app">
  <header>header</header>
  <nav>
    <h1>計分</h1>
    <div>分數：{{score}}</div>
    <div>目前題數：{{ currentStep }}</div>
    <div>目前難度：{{ currentType }}</div>
  </nav>
  <main>
    <div v-for="item in questions" :key="item.id" class="box">
      <div>{{ item.id }}</div>
      <div>
        <button @click="rightHandler">{{ item.answers.right }}</button>
        <button @click="wrongHandler">{{ item.answers.wrong }}</button>
      </div>
    </div>
  </main>
  <footer>
    已完成題目
    <div v-for="item in questionsDone" :key="item.id" class="box">
      <div>{{ item.id }}</div>
      <div>
        <button @click="rightHandler">{{ item.answers.right }}</button>
        <button @click="wrongHandler">{{ item.answers.wrong }}</button>
      </div>
    </div>
  </footer>
</div>

playground.json

{
  "scripts": [
    "https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"
  ],
  "styles": []
}

script.js

const questions = [
  { 
    id: 'e1',
    type: 'easy',
    question: 'test',
    answers: {
      right: 'right',
      wrong: 'wrong'
    }
  },
  { 
    id: 'e2',
    type: 'easy',
    question: 'test',
    answers: {
      right: 'right',
      wrong: 'wrong'
    }
  },
  { 
    id: 'e3',
    type: 'easy',
    question: 'test',
    answers: {
      right: 'right',
      wrong: 'wrong'
    }
  },
  { 
    id: 'h1',
    type: 'hard',
    question: 'test',
    answers: {
      right: 'right',
      wrong: 'wrong'
    }
  },
  { 
    id: 'h2',
    type: 'hard',
    question: 'test',
    answers: {
      right: 'right',
      wrong: 'wrong'
    }
  },
  { 
    id: 'h3',
    type: 'hard',
    question: 'test',
    answers: {
      right: 'right',
      wrong: 'wrong'
    }
  }
]

const app = new Vue({
  el: '#app',
  data: {
    message: 'hello world',
    questions: questions,
    score: 0,
    currentStep: 1,
    questionsDone: []
  },
  computed: {
    currentType() {
      const typeLimit = 2 
      if (this.score > typeLimit) {
        return 'hard'
      } else {
        return 'easy'
      }
    }
  },
  methods: {
    rightHandler() {
      this.score += 1
      this.stepHandler()
    },
    wrongHandler() {
      this.score -= 1
      this.stepHandler()
    },
    stepHandler(increase = 1) {
      this.currentStep += increase
    }
  }
})

style.scss

#app {
  background-color: #666;
  padding: 10px;

  header {
    background-color: #FFAAAA;
    margin-bottom: 8px;
  }
  main {
    background-color: #AFA;
    margin-bottom: 8px;
    border: 1px solid transparent;
  }
  footer {
    background-color: #AAF;
  }
}
.box {
  margin: 16px 8px;
  padding: 8px;
  border: 1px solid black;
  transition: all 0.5s;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 3px 3px 3px rgba($color: #000000, $alpha: 0.3);
  }
}