Documentaçao e mudança de layout na tela final

index.html

@@ -32,11 +32,10 @@
       <button id="next-button">Próxima</button>
     </div>
     <div class="score-container hide">
-      <div id="user-score">Pontuação</div>
+      <div id="theme-header">Desempenho por Temas</div>
       <div id="theme-score" class="score-theme-container">
-        <h4>Desempenho por temas</h4>
-
       </div>
+      <div id="user-score">Pontuação</div>
       <button id="restart">Reiniciar</button>
     </div>
     <!-- Script -->

perguntas.js

@@ -2,6 +2,19 @@
 
 // Modelo de dados:
 //
+//------------------------------------------------------------------------------------------
+// Temas:
+//------------------------------------------------------------------------------------------
+// name: question.theme,        // Nome do tema
+// numberOfQuestions: 1,        // # de questões no tema
+// answeredQuestions: 0,        // # de questões respondidas no tema
+// maxScoreTheme: 0,            // Maior pontuação possivel
+// score: 0,                    // Peso do Tema no todo (0 a 100), onde 0 = não considerado.
+//
+//
+//------------------------------------------------------------------------------------------
+// Perguntas:
+//------------------------------------------------------------------------------------------
 // id: "01.01",      // identificador da pergunta (id único)
 // type: "noAnswer",   // tipo pergunta: answer -> tem resposta certa
 //                     //                noAnswer -> não tem resposta certa

style.css

@@ -117,10 +117,15 @@ button {
   color: #689f38;
   border-color: #689f38;
 }
-#user-score {
+#theme-header {
   font-size: 1.5em;
   color: #ffffff;
 }
+#user-score {
+  color: #ffffff;
+  font-weight: 700;
+  margin-bottom: 2em;
+}
 
 /* score table styling */
 .tg {