diff --git a/src/activities/note_names/NoteNames.qml b/src/activities/note_names/NoteNames.qml
index fd4131c43..e4e781853 100755
--- a/src/activities/note_names/NoteNames.qml
+++ b/src/activities/note_names/NoteNames.qml
@@ -1,373 +1,377 @@
 /* GCompris - NoteNames.qml
  *
  * Copyright (C) 2016 Johnny Jazeix <jazeix@gmail.com>
  *
  * Authors:
  *   Beth Hadley <bethmhadley@gmail.com> (GTK+ version)
  *   Johnny Jazeix <jazeix@gmail.com> (Qt Quick port)
  *
  *   This program is free software; you can redistribute it and/or modify
  *   it under the terms of the GNU General Public License as published by
  *   the Free Software Foundation; either version 3 of the License, or
  *   (at your option) any later version.
  *
  *   This program is distributed in the hope that it will be useful,
  *   but WITHOUT ANY WARRANTY; without even the implied warranty of
  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  *   GNU General Public License for more details.
  *
  *   You should have received a copy of the GNU General Public License
  *   along with this program; if not, see <http://www.gnu.org/licenses/>.
  */
 import QtQuick 2.1
 import QtQuick.Controls 1.0
 import GCompris 1.0
 
 import "../../core"
 import "../playpiano"
 import "note_names.js" as Activity
 
 ActivityBase {
     id: activity
 
     onStart: focus = true
     onStop: {}
 
     pageComponent: Rectangle {
         id: background
         anchors.fill: parent
         color: "#ABCDEF"
 
         property bool keyboardMode: false
         property bool horizontalLayout: background.width > background.height ? true : false
 
         signal start
         signal stop
 
         Component.onCompleted: {
             activity.start.connect(start)
             activity.stop.connect(stop)
         }
 
         // Add here the QML items you need to access in javascript
         QtObject {
             id: items
             property Item main: activity.main
             property alias background: background
             property GCAudio audioEffects: activity.audioEffects
             property alias staff: staff
             property alias bar: bar
             property alias bonus: bonus
             property alias gridRepeater: gridRepeater
             property alias score: score
         }
 
         onStart: { Activity.start(items) }
         onStop: { Activity.stop() }
 
         Rectangle {
             id: instructionBox
             radius: 10
             width: background.width / 1.9
             height: horizontalLayout ? background.height / 5 : background.height / 4
             anchors.horizontalCenter: parent.horizontalCenter
             opacity: 0.8
             border.width: 6
             color: "white"
             border.color: "#87A6DD"
 
             GCText {
                 id: instructionText
                 visible: !staffText.visible
                 color: "black"
                 z: 3
                 anchors.fill: parent
-                fontSizeMode: Text.Fit
                 horizontalAlignment: Text.AlignHCenter
+                fontSizeMode: Text.Fit
                 wrapMode: Text.WordWrap
                 text: [2, 3, 4, 12, 13, 14].indexOf(bar.level) !== -1 ?
                     qsTr("Click on the note name to match the pitch. Then click OK to check.") :
                     [5, 6, 7, 15, 16, 17].indexOf(bar.level) !== -1 ?
                         qsTr("Now there are sharp notes. These pitches are raised a half step.") :
                         // [8, 9, 10, 18, 19, 20]
                         qsTr("Now there are flat notes. These pitches are lowered a half step.")
             }
 
             GCText {
                 id: staffText
                 visible: bar.level == 1 || bar.level == 11
                 height: background.height / 5
                 width: background.width / 1.5
                 z: 3
                 color: "black"
                 anchors.horizontalCenter: parent.horizontalCenter
                 fontSizeMode: Text.Fit
                 anchors.fill: parent
                 horizontalAlignment: Text.AlignHCenter
                 wrapMode: Text.WordWrap
                 text: bar.level == 1 ? qsTr("These are the eight basic notes in treble clef. They form the C Major Scale.") :
                                        qsTr("These are the eight basic notes in bass clef. They also form the C Major Scale. Notice that the note positions are different than in treble clef.")
             }
         }
 
         Rectangle {
             id: playScaleButton
-            width: parent.width / 6
+            width: horizontalLayout ? parent.width * 0.3 : parent.width * 0.45
             height: 30 * ApplicationInfo.ratio
             color: "#d8ffffff"
             border.color: "#2a2a2a"
             border.width: 3
             radius: 8
             z: 5
             anchors.top: instructionBox.bottom
             anchors.topMargin: 15
             anchors.horizontalCenter: parent.horizontalCenter
             visible: bar.level == 1 || bar.level == 11
 
             GCText {
                 id: playScaleButtonText
                 anchors.centerIn: parent
                 text: qsTr("Play scale")
+                fontSizeMode: Text.Fit
                 wrapMode: Text.WordWrap
             }
 
             MouseArea {
                 id: playScaleButtonArea
                 anchors.fill: parent
                 onClicked: {
                     staff.play()
                 }
             }
             states: [
                 State {
                     name: "notclicked"
                     PropertyChanges {
                         target: playScaleButton
                         scale: 1.0
                     }
                 },
                 State {
                     name: "clicked"
                     when: playScaleButtonArea.pressed
                     PropertyChanges {
                         target: playScaleButton
                         scale: 0.9
                     }
                 },
                 State {
                     name: "hover"
                     when: playScaleButtonArea.containsMouse
                     PropertyChanges {
                         target: playScaleButton
                         scale: 1.1
                     }
                 }
             ]
             Behavior on scale { NumberAnimation { duration: 70 } }
         }
 
         Rectangle {
             id: playButton
-            width: parent.width / 6
+            width: horizontalLayout ? parent.width * 0.3 : parent.width * 0.45
             height: 30 * ApplicationInfo.ratio
             color: "#d8ffffff"
             border.color: "#2a2a2a"
             border.width: 3
             radius: 8
             z: 5
-            anchors.top: instructionBox.bottom
-            anchors.topMargin: 15
-            anchors.left: playScaleButton.right
+            anchors.top: staff.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.topMargin: 20
             visible: bar.level == 1 || bar.level == 11
 
             GCText {
                 id: playButtonText
                 anchors.centerIn: parent
-                text: qsTr("Play")
-                wrapMode: Text.WordWrap
+                text: bar.level == 1 ? qsTr("Play Treble Clef") : qsTr("Play Bass Style")
+                fontSizeMode: Text.Fit
+                wrapMode: Text.Wrap
             }
 
             MouseArea {
                 id: playButtonArea
                 anchors.fill: parent
                 onClicked: {
                     Activity.nextLevel()
                 }
             }
             states: [
                 State {
                     name: "notclicked"
                     PropertyChanges {
                         target: playButton
                         scale: 1.0
                     }
                 },
                 State {
                     name: "clicked"
                     when: playButtonArea.pressed
                     PropertyChanges {
                         target: playButton
                         scale: 0.9
                     }
                 },
                 State {
                     name: "hover"
                     when: playButtonArea.containsMouse
                     PropertyChanges {
                         target: playScaleButton
                         scale: 1.1
                     }
                 }
             ]
             Behavior on scale { NumberAnimation { duration: 70 } }
         }
 
         MultipleStaff {
             id: staff
             nbStaves: 1
             clef: bar.level <= 10 ? "treble" : "bass"
             height: background.height / 4
             width: bar.level == 1 || bar.level == 11 ? background.width * 0.8 : background.width / 2
             anchors.bottom: bar.top
             anchors.bottomMargin: bar.height / 1.5
             anchors.horizontalCenter: bar.level == 1 || bar.level == 11 ? parent.horizontalCenter : undefined
             nbMaxNotesPerStaff: bar.level == 1 || bar.level == 11 ? 8 : 1
             firstNoteX: bar.level == 1 || bar.level == 11 ? width / 5 : width / 2
         }
 
         DialogHelp {
             id: dialogHelp
             onClose: home()
         }
 
         Keys.onPressed: {
             if(event.key === Qt.Key_Space) {
                 grid.currentItem.select()
             }
         }
         Keys.onReleased: {
             keyboardMode = true
             event.accepted = false
         }
         Keys.onEnterPressed: grid.currentItem.select();
         Keys.onReturnPressed: grid.currentItem.select();
         Keys.onRightPressed: grid.moveCurrentIndexRight();
         Keys.onLeftPressed: grid.moveCurrentIndexLeft();
         Keys.onDownPressed: grid.moveCurrentIndexDown();
         Keys.onUpPressed: grid.moveCurrentIndexUp();
 
         ListModel {
             id: gridRepeater
         }
 
         GridView {
             id: grid
             visible: instructionText.visible
             anchors {
                 left: staff.right
                 right: background.right
                 leftMargin: 15 * ApplicationInfo.ratio
                 rightMargin: 50 * ApplicationInfo.ratio
                 top: playScaleButton.bottom
             }
             keyNavigationWraps: true
             interactive: false
             model: gridRepeater
             cellWidth: itemWidth + 10
             cellHeight: itemHeight + 10
             height: staff.height
 
             property int itemWidth: 60
             property int itemHeight: itemWidth
 
             delegate: Rectangle {
                 id: noteRectangle
                 color: staff.noteIsColored ? dummyNote.noteColorMap[note] : "white"
                 width: grid.itemWidth
                 height: grid.itemHeight
                 radius: width / 5
                 border.color: "black"
 
                 GCText {
                     id: noteText
                     text: parseInt(note) > 0 ? dummyNote.whiteNoteName[note] : dummyNote.blackNoteName[note]
                     anchors.centerIn: parent
                     fontSizeMode: Text.Fit
                     horizontalAlignment: Text.AlignHCenter
                 }
                 MouseArea {
                     id: buttonClick
                     anchors.fill: parent
                     onClicked: select()
                 }
 
                 function select() {
                     grid.currentIndex = index
                     var noteToPlay = 'qrc:/gcompris/src/activities/playpiano/resource/' + 'bass' + '_pitches/' + '1' + '/' + note + '.wav';
                     items.audioEffects.play(noteToPlay);
                     okButton.currentAnswer = note
                 }
             }
 
             highlight: Rectangle {
                 id: noteHighlight
                 color: "red"
                 opacity: 0.6
                 border.width: 1.1
                 border.color: "white"
             }
         }
 
         // Never visible, only used to access the note names, colors
         Note {
             id: dummyNote
             visible: false
             value: "1"
             blackType: [8, 9, 10, 18, 19, 20].indexOf(bar.level) === -1 ? "sharp" : "flat"
         }
 
         Image {
             id: okButton
             visible: instructionText.visible
             source:"qrc:/gcompris/src/core/resource/bar_ok.svg"
             width: parent.width * 0.1
             height: parent.width * 0.1
-            anchors.right: background.right
-            anchors.bottom: score.top
-            anchors.bottomMargin: 20
-            anchors.rightMargin: 20
+            anchors {
+                right: background.right
+                bottom: score.top
+                bottomMargin: 20
+                rightMargin: 20
+            }
             property string currentAnswer: ""
             MouseArea {
                 anchors.fill: parent
                 onClicked: {
                     if(okButton.currentAnswer !== "")
                         Activity.checkAnswer(okButton.currentAnswer);
                     okButton.currentAnswer = ""
                 }
             }
         }
 
         Bar {
             id: bar
             content: BarEnumContent { value: help | home | level }
             onHelpClicked: {
                 displayDialog(dialogHelp)
             }
             onPreviousLevelClicked: Activity.previousLevel()
             onNextLevelClicked: Activity.nextLevel()
             onHomeClicked: activity.home()
         }
 
         Bonus {
             id: bonus
             Component.onCompleted: win.connect(Activity.nextLevel)
         }
 
         Score {
             id: score
             anchors.bottom: background.bottom
             anchors.right: background.right
             visible: bar.level !== 1 && bar.level !== 11
         }
     }
 }
diff --git a/src/activities/note_names/note_names.js b/src/activities/note_names/note_names.js
index 29e43ec9b..5c22de4c3 100755
--- a/src/activities/note_names/note_names.js
+++ b/src/activities/note_names/note_names.js
@@ -1,109 +1,108 @@
 /* GCompris - note_names.js
  *
  * Copyright (C) 2016 Johnny Jazeix <jazeix@gmail.com>
  *
  * Authors:
  *   Beth Hadley <bethmhadley@gmail.com> (GTK+ version)
  *   Johnny Jazeix <jazeix@gmail.com> (Qt Quick port)
  *
  *   This program is free software; you can redistribute it and/or modify
  *   it under the terms of the GNU General Public License as published by
  *   the Free Software Foundation; either version 3 of the License, or
  *   (at your option) any later version.
  *
  *   This program is distributed in the hope that it will be useful,
  *   but WITHOUT ANY WARRANTY; without even the implied warranty of
  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  *   GNU General Public License for more details.
  *
  *   You should have received a copy of the GNU General Public License
  *   along with this program; if not, see <http://www.gnu.org/licenses/>.
  */
 .pragma library
 .import QtQuick 2.0 as Quick
 .import "qrc:/gcompris/src/core/core.js" as Core
 
 var currentLevel = 0
 var numberOfLevel = 20
 var items
 var notesToFind = []
 
 function start(items_) {
     items = items_
     currentLevel = 0
     initLevel()
 }
 
 function stop() {
 }
 
 function initLevel() {
     items.score.currentSubLevel = 1
     items.bar.level = currentLevel + 1
 
     items.staff.eraseAllNotes()
 
     items.staff.noteIsColored = [1, 2, 5, 8, 11, 12, 15, 18].indexOf(items.bar.level) !== -1
 
     items.gridRepeater.clear();
 
     if(items.bar.level === 1 || items.bar.level === 11) {
         //items.staff.displayNoteLabel(true);
         for(var i = 0 ; i < 8 ; ++ i) {
             items.staff.addNote("" + (i + 1), 4, "", true);
         }
     }
     else {
         //items.staff.displayNoteLabel(false);
         if([5, 6, 7, 8, 9, 10, 15, 16, 17, 18, 19, 20].indexOf(items.bar.level) !== -1) {
             var notes = Core.shuffle(["1", "2", "3", "4", "5", "6", "7", "-1", "-2", "-3", "-4", "-5"]);
             for(var i = 0 ; i < notes.length ; ++ i) {
                 items.gridRepeater.append({"note": notes[i]});
             }
             notesToFind = Core.shuffle(notes)
         }
         else {
             var notes = Core.shuffle(["1", "2", "3", "4", "5", "6", "7"]);
             for(var i = 0 ; i < notes.length ; ++ i) {
                 items.gridRepeater.append({"note": notes[i]});
             }
             notesToFind = Core.shuffle(notes);
             var noteToPlay = 'qrc:/gcompris/src/activities/playpiano/resource/' + 'bass' + '_pitches/' + '1' + '/' + notesToFind[items.score.currentSubLevel - 1] + '.wav';
-            items.audioEffects.play(noteToPlay);
-            print(notesToFind[items.score.currentSubLevel - 1])
+            items.audioEffects.play(noteToPlay)
         }
         items.staff.addNote(notesToFind[items.score.currentSubLevel-1], 4, "", true);
     }
     items.score.numberOfSubLevels = notesToFind.length
 }
 
 function nextLevel() {
     if(numberOfLevel <= ++ currentLevel) {
         currentLevel = 0
     }
     initLevel();
 }
 
 function previousLevel() {
     if(--currentLevel < 0) {
         currentLevel = numberOfLevel - 1
     }
     initLevel();
 }
 
 function checkAnswer(answer) {
     if(answer === notesToFind[items.score.currentSubLevel - 1]) {
         if(items.score.currentSubLevel >= notesToFind.length) {
             // Go to next level
             items.bonus.good("note");
         }
         else {
             items.score.currentSubLevel ++;
             items.staff.eraseAllNotes();
-            items.staff.addNote(notesToFind[items.score.currentSubLevel-1], 4, "", true);
+            items.staff.addNote(notesToFind[items.score.currentSubLevel - 1], 4, "", true);
         }
     }
     else {
         items.bonus.bad("note");
     }
 }
diff --git a/src/activities/playpiano/MultipleStaff.qml b/src/activities/playpiano/MultipleStaff.qml
index 50c153884..16515ff50 100644
--- a/src/activities/playpiano/MultipleStaff.qml
+++ b/src/activities/playpiano/MultipleStaff.qml
@@ -1,156 +1,157 @@
 /* GCompris - MultipleStaff.qml
  *
  * Copyright (C) 2016 Johnny Jazeix <jazeix@gmail.com>
  *
  * Authors:
  *   Beth Hadley <bethmhadley@gmail.com> (GTK+ version)
  *   Johnny Jazeix <jazeix@gmail.com> (Qt Quick port)
  *
  *   This program is free software; you can redistribute it and/or modify
  *   it under the terms of the GNU General Public License as published by
  *   the Free Software Foundation; either version 3 of the License, or
  *   (at your option) any later version.
  *
  *   This program is distributed in the hope that it will be useful,
  *   but WITHOUT ANY WARRANTY; without even the implied warranty of
  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  *   GNU General Public License for more details.
  *
  *   You should have received a copy of the GNU General Public License
  *   along with this program; if not, see <http://www.gnu.org/licenses/>.
  */
 import QtQuick 2.1
 import GCompris 1.0
 
 import "../../core"
 
 Item {
     id: multipleStaff
 
     property int nbStaves
     property string clef
     property int distanceBetweenStaff: 20
 
     property int currentStaff: 0
 
     property int nbMaxNotesPerStaff: 6
 
     property int firstNoteX: width / 5
     property bool noteIsColored
     property bool isMetronomeDisplayed: false
 
     Column {
         Repeater {
             id: staves
             model: nbStaves
             Staff {
                 id: staff
                 clef: multipleStaff.clef
                 height: (multipleStaff.height-distanceBetweenStaff*(nbStaves-1))/nbStaves
                 width: multipleStaff.width
                 y: index * (height+distanceBetweenStaff)
                 lastPartition: index == nbStaves-1
                 nbMaxNotesPerStaff: multipleStaff.nbMaxNotesPerStaff
                 noteIsColored: multipleStaff.noteIsColored
                 isMetronomeDisplayed: multipleStaff.isMetronomeDisplayed
                 firstNoteX: multipleStaff.firstNoteX
             }
         }
     }
 
     function addNote(newValue_, newType_, newBlackType_, highlightWhenPlayed_) {
         if(staves.itemAt(currentStaff).notes.count > nbMaxNotesPerStaff) {
             if(currentStaff+1 >= nbStaves) {
                 return
             }
             else
                 currentStaff++
         }
 
         staves.itemAt(currentStaff).addNote(newValue_, newType_, newBlackType_, highlightWhenPlayed_);
     }
 
     function play() {
+        print("hello")
         musicTimer.currentPlayedStaff = 0;
         musicTimer.currentNote = 0;
         musicTimer.interval = 1000;
         for(var v = 1 ; v < currentStaff ; ++ v)
             staves.itemAt(v).showMetronome = false;
         // Only display metronome if we want to
         staves.itemAt(0).showMetronome = isMetronomeDisplayed;
 
         musicTimer.start();
     }
 
     function eraseAllNotes() {
         for(var v = 0 ; v <= currentStaff ; ++ v)
             staves.itemAt(v).eraseAllNotes();
         currentStaff = 0;
     }
 
     property var whiteNotes: ["C", "D", "E", "F", "G", "A", "B", "2C", "2D", "2E", "2F"]
     property var blackNotesSharp: ["C#", "D#", "F#", "G#", "A#", "2C#"]
     property var blackNotesFlat: ["DB", "EB", "GB", "AB", "BB"]
 
     function loadFromData(data) {
         eraseAllNotes()
         var melody = data.split(" ");
         multipleStaff.clef = melody[0];
         for(var i = 1 ; i < melody.length ; ++ i) {
             var noteLength = melody[i].length;
             var type = parseInt(melody[i][noteLength-1]);
             var noteStr = melody[i].substr(0, noteLength-1).toUpperCase();
 
             if(whiteNotes.indexOf(noteStr) != -1)
                 addNote(""+(whiteNotes.indexOf(noteStr)+1), type, "", false);
             else if (blackNotesSharp.indexOf(melody[i][0]) != -1) {
                 addNote(""+(-1*blackNotesSharp.indexOf(noteStr)-1), type, "sharp", false);
             }
             else {
                 addNote(""+(-1*blackNotesFlat.indexOf(noteStr)-1), type, "flat", false);
             }
 
             print(melody[i]);
         }
     }
 
     Timer {
         id: musicTimer
         property int currentPlayedStaff: 0
         property int currentNote: 0
         onRunningChanged: {
             if(!running && staves.itemAt(currentPlayedStaff).notes.get(currentNote) !== undefined) {
                 var currentType = staves.itemAt(currentPlayedStaff).notes.get(currentNote).mType
                 var note = staves.itemAt(currentPlayedStaff).notes.get(currentNote).mValue
 
                 // TODO some notes does not play if they are played in the rcc directly...
                 var noteToPlay = 'qrc:/gcompris/src/activities/playpiano/resource/'+multipleStaff.clef+'_pitches/'+currentType+'/'+note+'.wav';
                 items.audioEffects.play(noteToPlay);
                 //staves.itemAt(currentPlayedStaff).notes.get(currentNote).play()
 
                 if(currentNote == 0) {
                     staves.itemAt(currentPlayedStaff).initMetronome();
                 }
                 musicTimer.interval = staves.itemAt(currentPlayedStaff).notes.get(currentNote).mDuration;
                 currentNote ++;
                 if(currentNote > nbMaxNotesPerStaff) {
                     currentNote = 0;
                     currentPlayedStaff ++;
                     if(currentPlayedStaff < nbStaves && currentNote < staves.itemAt(currentPlayedStaff).notes.count) {
                         print("play next staff");
                         staves.itemAt(currentPlayedStaff).showMetronome = isMetronomeDisplayed;
                         if(currentPlayedStaff>0)
                             staves.itemAt(currentPlayedStaff-1).showMetronome = false;
                         staves.itemAt(currentPlayedStaff).playNote(currentNote);
                         musicTimer.start();
                     }
                 }
                 else if(staves.itemAt(currentPlayedStaff).notes.get(currentNote) !== undefined) {
                     print("will play next " + JSON.stringify(staves.itemAt(currentPlayedStaff).notes.get(currentNote)));
                     staves.itemAt(currentPlayedStaff).playNote(currentNote);
                     musicTimer.start();
                 }
             }
         }
     }
 }
diff --git a/src/activities/playpiano/Note.qml b/src/activities/playpiano/Note.qml
index 5c623ebe8..ea952d196 100644
--- a/src/activities/playpiano/Note.qml
+++ b/src/activities/playpiano/Note.qml
@@ -1,107 +1,107 @@
 /* GCompris - Note.qml
  *
  * Copyright (C) 2016 Johnny Jazeix <jazeix@gmail.com>
  *
  * Authors:
  *   Beth Hadley <bethmhadley@gmail.com> (GTK+ version)
  *   Johnny Jazeix <jazeix@gmail.com> (Qt Quick port)
  *
  *   This program is free software; you can redistribute it and/or modify
  *   it under the terms of the GNU General Public License as published by
  *   the Free Software Foundation; either version 3 of the License, or
  *   (at your option) any later version.
  *
  *   This program is distributed in the hope that it will be useful,
  *   but WITHOUT ANY WARRANTY; without even the implied warranty of
  *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  *   GNU General Public License for more details.
  *
  *   You should have received a copy of the GNU General Public License
  *   along with this program; if not, see <http://www.gnu.org/licenses/>.
  */
 import QtQuick 2.1
 import QtGraphicalEffects 1.0
 import GCompris 1.0
 
 import "../../core"
 
 Item {
     id: note
     property string value
     property bool noteIsColored: true
     property int type: wholeNote
     property string noteType: type == wholeNote ? "whole" :
                               type == halfNote ? "half" :
                               type == quarterNote ? "quarter" : 
                               type == eighthNote ? "eighth" : ""
     property string blackType: "" // empty, "flat" or "sharp"
 
     //width: noteImage.width
     //height: noteImage.height
 
     readonly property int wholeNote: 1
     readonly property int halfNote: 2
     readonly property int quarterNote: 4
     readonly property int eighthNote: 8
 
     readonly property int noteDuration: 2000 / type
 
     property var noteColorMap: { "1": "#FF0000", "2": "#FF7F00", "3": "#FFFF00",
         "4": "#32CD32", "5": "#6495ED", "6": "#D02090", "7": "#FF1493", "8": "#FF0000", "9": "#FF7F00", "10": "#FFFF00", "11": "#32CD32",
         "-1": "#FF6347", "-2": "#FFD700", "-3": "#20B2AA", "-4": "#8A2BE2",
         "-5": "#FF00FF" }
 
     property var whiteNoteName: { "1": qsTr("C"), "2": qsTr("D"), "3": qsTr("E"),
         "4": qsTr("F"), "5": qsTr("G"), "6": qsTr("A"), "7": qsTr("B"), "8": qsTr("C") }
     property var blackNoteName: blackType == "flat" ? flatNoteName : sharpNoteName
 
     property var sharpNoteName: { "-1": qsTr("C#"), "-2": qsTr("D#"), "-3": qsTr("F#"), "-4": qsTr("G#"),
                                   "-5": qsTr("A#")}
     property var flatNoteName: { "-1": qsTr("Db"), "-2": qsTr("Eb"), "-3": qsTr("Gb"), "-4": qsTr("Ab"),
                                   "-5": qsTr("Bb")}
 
     property bool highlightWhenPlayed: false
 
     Image {
         id: blackTypeImage
-        source: blackType !== "" ? "qrc:/gcompris/src/activities/playpiano/resource/black"+blackType+".svg" : ""
+        source: blackType !== "" ? "qrc:/gcompris/src/activities/playpiano/resource/black" + blackType + ".svg" : ""
         visible: value[0] === '-'
         sourceSize.width: noteImage.width/2.5
         anchors.right: noteImage.left
         anchors.rightMargin: -width/2
         anchors.bottom: noteImage.bottom
         anchors.bottomMargin: -height/2
         fillMode: Image.PreserveAspectFit
     }
 
     Image {
         id: highlightImage
         source: "qrc:/gcompris/src/activities/playpiano/resource/note-highlight.svg"
         visible: false
         sourceSize.width: noteImage.width
         height: noteImage.height / 2
         anchors.bottom: noteImage.bottom
     }
 
     Image {
         id: noteImage
-        source: "qrc:/gcompris/src/activities/playpiano/resource/"+noteType+"-note.svg"
+        source: "qrc:/gcompris/src/activities/playpiano/resource/" + noteType + "-note.svg"
         sourceSize.width: 200
         width: note.width
         height: note.height
     }
 
-    // If the result is not good enought maybe have a rectangle and use opacity mask with a note
+    // If the result is not good enough maybe have a rectangle and use opacity mask with a note
     ColorOverlay {
         anchors.fill: noteImage
         source: noteImage
         color: noteColorMap[value]  // make image like it lays under red glass 
         visible: noteIsColored
     }
 
     Timer {
         id: highlightTimer
         interval: noteDuration
         onRunningChanged: highlightImage.visible = running
     }
 }