HTML5 Web Application Development By Example Beginner's guide

Time for action – creating the results panel

After all of the notes have been played for the song, the updateNotes() method calls showScore(), where we will show the player's score and some statistics:

function showScore()
{
    $notesPanel.hide();
    $resultsPanel.fadeIn();
    $(".score", $resultsPanel).text(score);
    $(".correct", $resultsPanel).text(notesCorrect);
    $(".count", $resultsPanel).text(noteCount);
    $(".note-accuracy", $resultsPanel).text(
        Math.round(100 * notesCorrect / noteCount));
    $(".timing-accuracy", $resultsPanel).text(
        Math.round(10 * score / notesCorrect));
}

First we hide the notes panel and fade in the score panel in its place. Then, we fill in the score and statistics into the placeholders in the DOM. We show the score, number of notes ...