diff --git a/src/activities/letter-in-word/Card.qml b/src/activities/letter-in-word/Card.qml
index 7e662ed17..80de0f8b9 100644
--- a/src/activities/letter-in-word/Card.qml
+++ b/src/activities/letter-in-word/Card.qml
@@ -1,185 +1,166 @@
 /* GCompris - Card.qml
  *
  * Copyright (C) 2016 Akshat Tandon  <akshat.tandon@research.iiit.ac.in>
  *
  * Authors:
  *   Akshat Tandon    <akshat.tandon@research.iiit.ac.in>
  *
  *   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 QtGraphicalEffects 1.0
 import "../../core"
 import "letter-in-word.js" as Activity
 
 Item {
     id: cardItem
     //width: cardImage.width
     height: wordPic.height + cardImage.height - 30 * ApplicationInfo.ratio
     property bool mouseActive: true
 
-    Image{
+    Image {
         id: wordPic
         sourceSize.width: cardItem.width -6
         sourceSize.height: cardItem.width -5
         fillMode: Image.PreserveAspectFit
         source: imgurl
-        z:-5
+        z: -5
         //visible: index % 2 != 0 ? false : true
     }
 
     Image {
         id: cardImage
-        anchors.top:wordPic.bottom
+        anchors.top: wordPic.bottom
         anchors.topMargin: -30 * ApplicationInfo.ratio
         sourceSize.width: cardItem.width - 10
         fillMode: Image.PreserveAspectFit
-        source:  Activity.resUrl2 + "cloud.svg"
+        source: Activity.resUrl2 + "cloud.svg"
         z: (state == 'scaled') ? 1 : -1
         //visible: index % 2 != 0 ? false : true
 
-        Row {
-            anchors.verticalCenter: cardImage.verticalCenter
-            anchors.horizontalCenter: cardImage.horizontalCenter
-
-            Repeater {
-                model: components
-                GCText {
-                    id: textbox
-                    z: 11
-                    text: textdata
-                    font.pointSize: NaN  // need to clear font.pointSize explicitly
-                    font.pixelSize: spelling.length > 5 ? (spelling.length > 7 ? cardImage.width * 0.19 : cardImage.width * 0.25): cardImage.width * 0.30
-                    font.bold: true
-                    style: Text.Outline
-                    styleColor: "#2a2a2a"
-                    color: selected && textdata.length == 1 && textdata == Activity.currentLetter ? "green" : "white"
-
-                }
-            }
+        GCText {
+            id: textItem
+            z: 11
+            // textData is the rich text with letter found, spelling is the text in the dataset
+            text: selected ? textData : spelling
+            textFormat: Text.RichText
+            font.pointSize: NaN  // need to clear font.pointSize explicitly
+            font.pixelSize: spelling.length > 5 ? (spelling.length > 7 ? cardImage.width * 0.19 : cardImage.width * 0.25): cardImage.width * 0.30
+            font.bold: true
+            style: Text.Outline
+            width: cardImage.width
+            height: cardImage.height
+            wrapMode: Text.WordWrap
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+            styleColor: "#2a2a2a"
+            color: "white"
         }
 
         ParticleSystemStarLoader {
             id: particle
             clip: false
         }
 
         states:
             State {
                 name: "scaled"; when: mouseArea.containsMouse && mouseActive
                 PropertyChanges {
                     target: cardItem
                     scale: /*carriageImage.scale * */ 1.2
                     z: 2
                 }
             }
 
         transitions: Transition {
             NumberAnimation { properties: "scale"; easing.type: Easing.OutCubic }
         }
 
         SequentialAnimation {
             id: successAnimation
             running: selected
             loops: Animation.Infinite
             NumberAnimation {
                 target: cardImage
                 easing.type: Easing.InOutQuad
                 property: "rotation"
                 to: 20; duration: 500
             }
             NumberAnimation {
                 target: cardImage
                 easing.type: Easing.InOutQuad
                 property: "rotation"; to: -20
                 duration: 500
             }
         }
 
         SequentialAnimation {
             id: failureAnimation
             NumberAnimation {
                 target: colorCardImage
                 property: "opacity"
                 to: 1; duration: 400
             }
             NumberAnimation {
                 target: colorCardImage
                 property: "opacity"
                 to: 0; duration: 200
             }
         }
+
         NumberAnimation {
             id: rotationStop
             running: !selected
             target: cardImage
             property: "rotation"
             to: 0
             duration: 500
             easing.type: Easing.InOutQuad
         }
     }
 
     Colorize {
         id: colorCardImage
         z: 5
         anchors.fill: cardImage
         source: cardImage
         hue: 0.0
         saturation: 1
         opacity: 0
     }
 
     MouseArea {
         id: mouseArea
         anchors.fill: parent
         hoverEnabled: ApplicationInfo.isMobile ? false : true
         onClicked: {
             select();
         }
     }
 
     function select() {
         if(mouseActive && !successAnimation.running) {
             if (Activity.checkWord(index)) {
                 successAnimation.restart();
-                particle.burst(30)
-                components.clear();
-                var tempword;
-                var j = 0;
-                for(var i = 0; i < spelling.length; i++) {
-                    if(spelling.charAt(i) == Activity.currentLetter) {
-                        tempword = spelling.substring(j, i);
-                        if(i != j) {
-                            components.append({"textdata": tempword})
-                        }
-                        components.append({"textdata": Activity.currentLetter});
-
-                        j = i + 1;
-                    }
-                }
-                if(j < spelling.length) {
-                    tempword = spelling.substring(j, spelling.length);
-                    components.append({"textdata": tempword})
-
-                }
+                particle.burst(30);
+                textData = spelling.replace(RegExp(Activity.currentLetter, "g"), "<font color=\"green\">"+Activity.currentLetter+"</font>");
             }
             else {
                 failureAnimation.restart()
             }
         }
     }
 }
diff --git a/src/activities/letter-in-word/letter-in-word.js b/src/activities/letter-in-word/letter-in-word.js
index 1b25058fc..e5de5024f 100644
--- a/src/activities/letter-in-word/letter-in-word.js
+++ b/src/activities/letter-in-word/letter-in-word.js
@@ -1,264 +1,260 @@
 /* GCompris - letter-in-word.js
  *
  * Copyright (C) 2014 Holger Kaelberer
  *               2016 Akshat Tandon
  *
  * Authors:
  *   Holger Kaelberer <holger.k@elberer.de> (Qt Quick port of click-on-letter)
  *   Akshat Tandon    <akshat.tandon@research.iiit.ac.in>
  *
  *   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 GCompris 1.0 as GCompris //for ApplicationInfo
 .import "qrc:/gcompris/src/core/core.js" as Core
 .import "qrc:/gcompris/src/activities/lang/lang_api.js" as Lang
 
 var url = "qrc:/gcompris/src/activities/letter-in-word/resource/"
 var resUrl = "qrc:/gcompris/src/activities/braille_fun/resource/"
 var resUrl2 = "qrc:/gcompris/src/activities/click_on_letter/resource/"
 
 var levels;
 var currentLevel;
 var maxLevel;
 var currentSubLevel;
 var currentLetter;
 var maxSubLevel;
 var questions;
 var words;
 var items;
 var dataset = null;
 var frequency;
 var incorrectFlag = false;
 var locale;
 
 function start(_items) {
     Core.checkForVoices(_items.main);
     items = _items;
     // register the voices for the locale
     locale = GCompris.ApplicationInfo.getVoicesLocale(items.locale)
     GCompris.DownloadManager.updateResource(GCompris.DownloadManager.getVoicesResourceForLocale(locale))
     loadDataset();
     levels = Lang.getAllLessons(dataset)
     currentLevel = 0;
     currentSubLevel = 0;
     maxLevel = levels.length;
     initLevel();
 }
 
 function loadDataset() {
     var resourceUrl = "qrc:/gcompris/src/activities/lang/resource/"
     dataset = Lang.load(items.parser, resourceUrl,
                         GCompris.ApplicationSettings.wordset ? "words.json" : "words_sample.json",
                                                                "content-"+ locale +".json")
     // If dataset is empty, we try to load from short locale
     // and if not present again, we switch to default one
     var localeUnderscoreIndex = locale.indexOf('_')
     if(!dataset) {
         var localeShort;
         // We will first look again for locale xx (without _XX if exist)
         if(localeUnderscoreIndex > 0) {
             localeShort = locale.substring(0, localeUnderscoreIndex)
         }
         else {
             localeShort = locale;
         }
         dataset = Lang.load(items.parser, resourceUrl,
                             GCompris.ApplicationSettings.wordset ? "words.json" : "words_sample.json",
                                                                    "content-"+localeShort+ ".json")
     }
 
     if(!dataset) {
         // English fallback
         dataset = Lang.load(items.parser, resourceUrl,
                             GCompris.ApplicationSettings.wordset ? "words.json" : "words_sample.json",
                                                                    "content-en.json")
     }
 
 }
 
 function stop() {
     items.animateX.stop()
 }
 
 function shuffleString(s) {
     var a = s;
     var n = a.length;
 
     for(var i = n-1; i > 0; --i) {
         var j = Math.floor(Math.random() * (i + 1));
         var tmp = a[i];
         a[i] = a[j];
         a[j] = tmp;
     }
     return a.join("");
 }
 
 function initLevel() {
-    var componentsArr;
     items.bar.level = currentLevel + 1;
     if (currentSubLevel == 0 && !incorrectFlag) {
         var level = levels[currentLevel];
         words = Lang.getLessonWords(dataset, level);
         Core.shuffle(words);
         var limit = Math.min(11, words.length)
-        words = words.slice(0,limit)
+        words = words.slice(0, limit)
         frequency = calculateFrequency();
         var tempQuestions = generateQuestions();
         maxSubLevel = tempQuestions.length;
         items.score.numberOfSubLevels = maxSubLevel;
         items.score.currentSubLevel = 1;
         questions = shuffleString(tempQuestions);
         items.wordsModel.clear();
         for (var i = 0; i < words.length; i++) {
-            componentsArr = [];
-            componentsArr.push({"textdata": words[i].translatedTxt});
-
             items.wordsModel.append({
                                         "spelling": words[i].translatedTxt,
                                         "imgurl": words[i].image,
                                         "selected": false,
-                                        "components": componentsArr
+                                        "textData": words[i].translatedTxt
                                     });
         }
     }
     else {
         items.score.currentSubLevel = currentSubLevel + 1;
     }
 
     incorrectFlag = false;
 
     for(var i = 0; i < words.length; i++) {
         items.wordsModel.setProperty(i, "selected", false);
     }
 
     currentLetter = questions[currentSubLevel];
     items.question = currentLetter
     items.animateX.restart();
 
     if (GCompris.ApplicationSettings.isAudioVoicesEnabled &&
             GCompris.DownloadManager.haveLocalResource(
                 GCompris.DownloadManager.getVoicesResourceForLocale(locale))) {
         items.audioVoices.silence(100)
         playLetter(currentLetter)
     }
 }
 
 function calculateFrequency() {
     var freq = [];
     //regex pattern to detect whether the character is an english alphabet or some accented latin chacarcter
     var pattern = /[A-Za-z\u00C0-\u017F]/;
     for(var i = 0; i < words.length; i++) {
         var currentWord = words[i].translatedTxt;
         for(var j = 0; j < currentWord.length; j++) {
             var character = currentWord.charAt(j);
             //consider the character if and only if it is an alphabet or an accented latin character
             if(pattern.test(character)) {
                 if(freq[character]) {
                     freq[character]++;
                 }
                 else {
                     freq[character] = 1;
                 }
             }
         }
     }
     return freq;
 }
 
 function generateQuestions() {
     var freqArr = [];
     var ques = [];
 
     for(var character in frequency) {
         freqArr.push([character, frequency[character]]);
     }
 
     freqArr.sort(function(a, b) {return b[1] - a[1]});
 
     var limit = Math.min(10, freqArr.length);
     for(var i = 0; i < limit; i++) {
         ques.push(freqArr[i][0])
     }
     return ques;
 }
 
 function playLetter(letter) {
     items.audioVoices.append(GCompris.ApplicationInfo.getAudioFilePath("voices-$CA/"+locale+"/alphabet/"
                                                                        + Core.getSoundFilenamForChar(letter)))
 }
 
 function nextLevel() {
     items.audioVoices.clearQueue()
     if(maxLevel <= ++currentLevel) {
         currentLevel = 0
     }
     currentSubLevel = 0;
     initLevel();
 }
 
 function previousLevel() {
     items.audioVoices.clearQueue()
     if(--currentLevel < 0) {
         currentLevel = maxLevel - 1
     }
     currentSubLevel = 0;
     initLevel();
 }
 
 function nextSubLevel() {
     if( ++currentSubLevel >= maxSubLevel) {
         currentSubLevel = 0
         nextLevel()
     }
     initLevel();
 }
 
 function checkAnswer() {
     var hasWordNotFound = false;
     var modelEntry;
     for(var i = 0; i < words.length; i++) {
         modelEntry = items.wordsModel.get(i);
         if(modelEntry.spelling.indexOf(currentLetter) != -1 && modelEntry.selected == false) {
             hasWordNotFound = true;
             break;
         }
     }
     if(hasWordNotFound == false) {
         items.bonus.good("flower");
     }
 }
 
 function checkWord(index) {
     var modelEntry = items.wordsModel.get(index);
     if(modelEntry.spelling.indexOf(currentLetter) != -1) {
         items.wordsModel.setProperty(index, "selected", true);
         checkAnswer();
         return true;
     }
     else {
         items.bonus.bad("flower");
         return false;
     }
 }
 
 function incorrectSelection() {
     incorrectFlag = true;
     var quesLen = questions.length;
     questions = questions.slice(0, currentSubLevel) + questions.slice(currentSubLevel+1, quesLen) + questions.charAt(currentSubLevel);
     currentSubLevel--;
     nextSubLevel();
 }