word-games-theme 0.7.9 → 0.8.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 63fd87bab912789ed6100949d650aac8dc8ef17665fefdfbc7339b12c22de4b1
-  data.tar.gz: a10fded5c42a285c7dc1fe64b9a3c481058c9428d2a4d61a53b8409e4ab5ec4d
+  metadata.gz: 0ee34c20666ba81ae3fbcee19af3d215cd4f21ddfbee6191aeac0640b0803e96
+  data.tar.gz: b1df8727531dbefc545e2cf61c16baeca78ccf20873536ef8e6e94810304e9e8
 SHA512:
-  metadata.gz: 9e454229ce820a915871ef22e8a6689b5f875aaec25db6d6908a405b39f7369858603844ef1be52c3daff5c216a36d8033ee958bc8d3901ce933713131a8792e
-  data.tar.gz: dd7204251ed6f653f4d666b291cec6ef6b0f3108882ba4de82d0ea32459c0d482c9e516f6b3b1f085270f0ff41fa7ad2105e44daaee29298443415979a1248f1
+  metadata.gz: a9879e76ae9e72ed2d0733f3f87b16bbf550a425568c08e17f5a04f8e9ecebdcd5fa7761d889129c0202bd7f6724a4a9084632039ba7576102dbab3deb2271b2
+  data.tar.gz: 56f8c7b936c16eb7672cbdef2037752edadfc69b2d1c0f2675d52a53b4aeb78c4dd289ba095e4c018bd7caa6a5529abf243d4015e40b34eee60c35e1702f44cf

data/_data/header/en/data.json

@@ -5,6 +5,10 @@
       "name": "words",
       "url": "/test"
     },
+    {
+      "name": "4 letter words with these letters and a blank",
+      "url": "/4-letter-words-with-these-letters-and-a-blank"
+    },
     {
       "name": "unscramble-letters",
       "url": "/unscramble-letters-to-make-words"

data/_data/wordgames/en/4_letter_words_with_these_letters_and_a_blank.json

@@ -0,0 +1 @@
+{"filewords":{"name":"","data":[{"word":"","x":"","gameName":""}]},"filepath":{},"title":"4 letter words with these letters and a blank- The most useful word finder tool ","h1":"Here's the full list of 4 letter words with these letters and a blank","h2":"Find all 4 letter words with these letters and a blank","meta":"Find words using a combination of letters and blanks words using a combination of letters and blanks without any constrain. Use our advanced word search tool and get your desired result.","featureNo":"02","feature_title":"Features","blogNo":"03","blog_title":"Blog","FaqNo":"04","Faq_title":"FAQ","aboutNo":"05","about_title":"About","featureList":[{"feature_heading":"","feature_text":"","fa_class":"../assets/images/star.svg"},{"feature_heading":"","feature_text":"","fa_class":"../assets/images/star.svg"},{"feature_heading":"","feature_text":"","fa_class":"../assets/images/star.svg"},{"feature_heading":"","feature_text":"","fa_class":"../assets/images/star.svg"},{"feature_heading":"","feature_text":"","fa_class":"../assets/images/star.svg"},{"feature_heading":"","feature_text":"","fa_class":"../assets/images/star.svg"}],"faqList":[{"Question":"","Answer":""}]}

data/_includes/Monumetric/Monumetric.html

@@ -2,6 +2,6 @@
 <script type="text/javascript" defer delay="{{site.MonumetricID}}" data-cfasync="false"></script>
 {% endif %}
 
-<!-- {% if jekyll.environment == 'development' and site.MonumetricID %}
+{% if jekyll.environment == 'development' and site.MonumetricID %}
 <script type="text/javascript" delay="{{site.MonumetricID}}"></script>
-{% endif %} -->
+{% endif %}

data/_includes/footer/index.html

@@ -58,38 +58,6 @@
         <div class="container">
             <div class="footer-single-col">
                 <div class="row d-flex  justify-content-between mt-5 ">
-                    <div class="col-md-12 txt-secondary mb-5">
-                        {%- if dataToShow.logo -%}
-                        <div class="footer-logo-cont">
-                            <img loading="lazy" src="{{dataToShow.logo}}" title="logo" class="footer-logo  d-block"
-                                alt="footer logo" width="30px">
-                            <span>
-                                {{dataToShow.heading}}
-                            </span>
-                            <!-- <div class="footer-title">{{dataToShow.heading}}</div> -->
-                        </div>
-                        {%- endif -%}
-                        <hr class="footer_hr">
-                        <div class="footer-social-list mt-4">
-                            <ul class="list-inline">
-                                {% for data in dataToShow.social %}
-                                <li>
-                                    <a href="{{data.url}}" target="_blank">
-                                        <i class="{{data.icon}}"></i>
-                                    </a>
-                                </li>
-                                {% endfor %}
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div class="col-md-2 txt-secondary">
-                        <p class=" font-weight-bold txt-primary footer_subheading">{{dataToShow.companytitle | default:
-                            'Company' }}</p>
-                        {% for data in dataToShow.company %}
-                        <p class="mb-4"><a class="footer-links txt-secondary" href="{{data.url}}">{{data.name}}</a></p>
-                        {% endfor %}
-                    </div>
                     <div class="col-md-2 txt-secondary">
                         <p class=" font-weight-bold txt-primary footer_subheading">{{dataToShow.linksTitle | default:
                             'Links' }}</p>
@@ -97,7 +65,6 @@
                         <p class="mb-4"><a class="footer-links txt-secondary" href="{{data.url}}">{{data.name}}</a></p>
                         {% endfor %}
                     </div>
-
                     <div class="col-md-2 txt-secondary ">
                         <p class=" font-weight-bold txt-primary footer_subheading">{{dataToShow.producttitle | default:
                             'tools' }}</p>
@@ -112,6 +79,38 @@
                         <p class="mb-4"><a class="footer-links txt-secondary" href="{{data.url}}">{{data.name}}</a></p>
                         {% endfor %}
                     </div>
+                    <div class="col-md-2 txt-secondary">
+                        <p class=" font-weight-bold txt-primary footer_subheading">{{dataToShow.companytitle | default:
+                            'Company' }}</p>
+                        {% for data in dataToShow.company %}
+                        <p class="mb-4"><a class="footer-links txt-secondary" href="{{data.url}}">{{data.name}}</a></p>
+                        {% endfor %}
+                    </div>
+                </div>
+
+                <div class="col-md-12 txt-secondary mb-5">
+                    {%- if dataToShow.logo -%}
+                    <div class="footer-logo-cont">
+                        <img loading="lazy" src="{{dataToShow.logo}}" title="logo" class="footer-logo  d-block"
+                            alt="footer logo" width="30px">
+                        <span class="email_heaidng">
+                            {{dataToShow.heading}}
+                        </span>
+                        <!-- <div class="footer-title">{{dataToShow.heading}}</div> -->
+                    </div>
+                    {%- endif -%}
+                    <hr class="footer_hr">
+                    <div class="footer-social-list mt-4">
+                        <ul class="list-inline">
+                            {% for data in dataToShow.social %}
+                            <li>
+                                <a href="{{data.url}}" target="_blank">
+                                    <i class="{{data.icon}}"></i>
+                                </a>
+                            </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
                 </div>
                 <div class="copyright-text mt-5 txt-secondary text-center">
                     <p>

data/_includes/section/commonPage.html

@@ -14,7 +14,7 @@
 </div> -->
 <div class="container" id="containerWd">
     <section class="sticky_nav">
-        <div class="pageHeading text-center pt-5">
+        <div class="pageHeading text-center">
             <h1 class="heading m-0 pb-0">
                 {{dataToShow.h1}}</h1>
             {%- if dataToShow.h2 != "" -%}

data/_includes/section/home.html

@@ -20,10 +20,14 @@
         <div class="serachSection">
             <div class="position-relative serachBox">
                 <form action="/result" id='form' method="GET">
-
-                    <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
-                        placeholder="Enter up to 15 letters?" class="txtBox" value='' name="search" maxlength="15"
-                        required autocomplete="off">
+                    <div style="position: relative;">
+                        <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
+                            placeholder="Enter up to 15 letters?" class="txtBox" value='' name="search" maxlength="15"
+                            required autocomplete="off">
+                        <span class="focus-border">
+                            <i></i>
+                        </span>
+                    </div>
                     <input style="border-radius: {{CustomColor.inputFieldBorder}}; 
                         background-color: {{CustomColor.inputButtonBg}};" type="submit" class="serachBtn" id="serach"
                         value>

data/_includes/section/home2.html

@@ -19,9 +19,15 @@
         <div class="serachSection">
             <div class="position-relative serachBox">
                 <form action="{{page.url}}/result" id='form' method="GET">
-                    <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
-                        placeholder="Enter up to 15 letters?" class="txtBox" value='' name="search" maxlength="15"
-                        required autocomplete="off">
+                    <div style="position: relative;">
+                        <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
+                            placeholder="Enter up to 15 letters?" class="txtBox" value='' name="search" maxlength="15"
+                            required autocomplete="off">
+                        <span class="focus-border">
+                            <i></i>
+                        </span>
+                    </div>
+
                     <input
                         style="border-radius: {{CustomColor.inputFieldBorder}}; background-color: {{CustomColor.inputButtonBg}};"
                         type="submit" class="serachBtn" id="serach" value>
@@ -85,7 +91,7 @@
                         </div>
                     </div>
                 </form>
-                {%- if page.letter == 5 -%}
+                {%- if page.wordle == 'solver' -%}
                 <h2 class="m-0 mt-4 text-center" style="font-size:16px">
                     <a style="color:#000" href="/wordle-solver">Solve wordle quickly using our wordle solver</a>
                 </h2>

data/_layouts/default.html

@@ -56,13 +56,11 @@
     <script defer src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
     <script>
-
         let txtBox = document.querySelector('.txtBox')
         let focusBorder = document.querySelector('.focus-border')
-
         txtBox.focus()
         txtBox.addEventListener('input', (e) => {
-            focusBorder.classList.remove('focus-border')
+            focusBorder.classList.remove("focus-border")
             e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, "")
             let rangeOfBlankTile = '{{ page.blanktilerange }}'
             if (rangeOfBlankTile === "") {

data/_layouts/page.html

@@ -49,7 +49,7 @@
 
 <body>
 
-  {%- include header/index.html -%}
+  {%- include header/resultHeader.html -%}
 
   {%- include section/commonPage.html -%}
 
@@ -59,6 +59,17 @@
 
   <link rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css" />
+  <script src="//cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
+  <script>WebFont.load({ google: { families: ['Poppins:400&display=swap'] } })</script>
+  <script>
+      (function () {
+        d = document;
+        c = d.createElement('link');
+        c.href = '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css';
+        c.rel = 'stylesheet';
+        d.head.appendChild(c);
+      })();
+  </script>
   <script data-range="{{page.blanktilerange}}" src="/assets/js/wordScrabble.js"></script>
   <script defer src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>

data/_layouts/page2.html

@@ -45,11 +45,10 @@
 
 <body>
 
-    {%- include header/index.html -%}
+    {%- include header/resultHeader.html -%}
 
     {%- include section/commonPage.html -%}
 
-
     {%- include share/socialshare.html -%}
 
     {%- include footer/index.html -%}
@@ -57,7 +56,18 @@
 
     <link rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css" />
-    <script src="/assets/js/X-letter.js" data-letter="{{page.letter}}"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
+    <script>WebFont.load({ google: { families: ['Poppins:400&display=swap'] } })</script>
+    <script>
+            (function () {
+                d = document;
+                c = d.createElement('link');
+                c.href = '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css';
+                c.rel = 'stylesheet';
+                d.head.appendChild(c);
+            })();
+    </script>
+    <script src="/assets/js/X-letter.js" data-letter="{{page.letter}}" data-ablank="{{page.ablank}}"></script>
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
     {% include Monumetric/Monumetric.html %}

data/_layouts/xyzpages.html

@@ -85,7 +85,7 @@
 </style>
 
 <body>
-    {%- include header/index.html -%}
+    {%- include header/resultHeader.html -%}
 
     {%- include xyzpages/xyz.html -%}
 

data/assets/css/advancedFilter.css

@@ -137,7 +137,8 @@ a {
   }
 
   .sticky_nav {
-    top: 50px;
+    top: 0px;
+    padding-top: 1.5rem;
   }
 
   .Advancedbtn {

data/assets/css/footer.css

@@ -272,7 +272,7 @@ hr {
 }
 
 .footer-section {
-  padding: 5px 0px;
+  padding: 50px 0px;
   background-color: #f8f9fa;
   margin-top: 3rem;
 }
@@ -321,4 +321,7 @@ hr {
   .txt-secondary {
     text-align: center;
   }
+  .email_heaidng{
+    font-size: 1.4rem;
+  }
 }

data/assets/css/home.css

@@ -12,6 +12,7 @@
 }
 .pageHeading {
   margin-bottom: 2rem;
+  padding-top: 3rem;
 }
 .pageHeading > h1 {
   font-size: 30px;
@@ -55,6 +56,77 @@ input:-webkit-autofill:active {
   outline: none;
   position: relative;
 }
+
+.txtBox~.focus-border:before,
+.txtBox~.focus-border:after {
+	content: "";
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 0;
+	height: 2px;
+	background-color: #000;
+	transition: .5s;
+	transition-delay: 0.2s;
+  z-index: 9;
+}
+.txtBox~.focus-border:after {
+	top: auto;
+	bottom: 0;
+	right: auto;
+	left: 0;
+	transition-delay: 0.6s;
+}
+.txtBox:focus~.focus-border:before,
+.txtBox:focus~.focus-border:after,
+.has-content.txtBox~.focus-border:before,
+.has-content.txtBox~.focus-border:after {
+	width: 100%;
+	transition: .5s;
+	transition-delay: 0.6s;
+}
+
+.txtBox:focus~.focus-border:after,
+.has-content.txtBox~.focus-border:after {
+	transition-delay: 0.2s;
+}
+
+.txtBox:focus~.focus-border i:before,
+.txtBox:focus~.focus-border i:after,
+.has-content.txtBox~.focus-border i:before,
+.has-content.txtBox~.focus-border i:after {
+	height: 100%;
+	transition: 0.2s;
+}
+
+.txtBox:focus~.focus-border i:after,
+.has-conten.txtBox~.focus-border i:after {
+	transition-delay: 0.4s;
+}
+.txtBox~.focus-border i:before,
+.txtBox~.focus-border i:after {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 2px;
+	height: 0;
+	background-color: #000;
+	transition: .5s;
+}
+
+.txtBox~.focus-border i:after {
+	left: auto;
+	right: 0;
+	top: auto;
+	bottom: 0;
+	transition-delay: 0.4s;
+}
+
+
+
+
+
 /* ravi */
 .txtBox::placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */
@@ -222,9 +294,20 @@ input:-webkit-autofill:active {
   padding: 0px;
 }
 @media (max-width: 768px) {
+  .pageHeaderBg{
+    height: 25vh;
+  }
+  .pageHeading{
+    padding:0 !important;
+  }
+  .pageHeading > h2{
+    font-size: 1.4rem;
+  }
   .wrapper_dropDown {
     align-items: flex-end;
     flex-direction: column;
+    gap: 0 !important;
+    margin:0 !important
   }
   .txtBox {
     height: 50px !important;
@@ -251,12 +334,11 @@ input:-webkit-autofill:active {
     width: 50%;
     right: 0;
     border-radius: 0;
-    padding: 9.5px;
+    padding: 7.5px;
     z-index: 99;
   }
   .pageHeading h1 {
     font-size: 2rem;
-    padding-top: 3rem;
   }
   #containerWd {
     width: 100% !important;

data/assets/css/style.css

@@ -385,6 +385,9 @@ header {
   padding: 4px 0;
 }
 @media (max-width: 768px) {
+  #resultHeader{
+    display: none;
+  }
   .social-icons {
     left: 0;
     bottom: 0 !important;

data/assets/css/wordGroup.css

@@ -54,9 +54,9 @@
 
 @media (max-width: 768px) {
   .wordCount {
-    font-size: 1.4rem;
+    font-size: 1.3rem;
   }
   .pad {
-    padding-top: 50px !important;
+    padding-top: 0px !important;
   }
 }

data/assets/js/X-letter.js

@@ -3,12 +3,15 @@
 const getScript=document.currentScript
 const letterLen = getScript.dataset.letter
 
+const ablank = getScript.dataset.ablank
+
 let errorMsg = document.querySelector('.errorMsg')
+let script = document.currentScript
 let wordCount = document.querySelector('.wordCount')
 let main = document.querySelector('.main')
 
 const params = new URLSearchParams(window.location.search)
-let serachValue = params.get('search')
+let serachValue = params.get('search').toLowerCase()
 let prefixValue = params.get('prefix')
 let containsValue = params.get('contains')
 let suffixValue = params.get('suffix')
@@ -24,9 +27,52 @@ let txtBox = document.querySelector('.txtBox')
 txtBox.focus()
 txtBox.value = serachValue
 
+
+if(ablank){
+if(!serachValue.includes("?")){
+  if(serachValue.length < letterLen){
+  serachValue = serachValue + '?'
+  }
+  }
+}
+
+txtBox.addEventListener('input', (e) => {
+  let rangeOfBlankTile = script.dataset.range
+  e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, '')
+  if (rangeOfBlankTile === '') {
+    rangeOfBlankTile = 5
+  }
+  e.target.value = e.target.value.replace(/ /g, '?')
+  let data = []
+  data = e.target.value.split('').filter((i) => i === '?')
+  if (data.length > rangeOfBlankTile) {
+    e.target.value = e.target.value.replace(/\?$/, '')
+  }
+})
+
 var theSelect = document.getElementById('select_dropDown')
 document.querySelector('.select_dropDown2').value = dictonary
-
+const getDiff = (text1, text2) => {
+  var diffRange = []
+  var currentRange = undefined
+  for (var i = 0; i < text1.length; i++) {
+    if (text1[i] != text2[i]) {
+      if (currentRange == undefined) {
+        currentRange = [i]
+      }
+    }
+    if (currentRange != undefined && text1[i] == text2[i]) {
+      currentRange.push(i)
+      diffRange.push(currentRange)
+      currentRange = undefined
+    }
+  }
+  if (currentRange != undefined) {
+    currentRange.push(i)
+    diffRange.push(currentRange)
+  }
+  return diffRange
+}
 const getData = async (serachValue) => {
   try {
     main.innerHTML = `<div class="loader">
@@ -46,6 +92,7 @@ const getData = async (serachValue) => {
 getData(serachValue.toLowerCase())
 
 function x_with_letters(data) {
+  console.log(data);
   if (typeof data === 'string') {
     errorMsg.innerHTML = 'No words found'
     wordCount.innerHTML = `<strong>Found 0 words with letters ${serachValue.split(
@@ -59,7 +106,7 @@ function x_with_letters(data) {
     if (letterLen) {
       filterData = data.filter((item) => item.length == letterLen)
     }
-  
+
 
     if (prefixValue) {
       filterData = filterData.filter((item2) =>
@@ -160,8 +207,45 @@ function x_with_letters(data) {
           sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
         }
         wordLength.value = itemLength
+
+        var text1 = serachValue.replace('?', '')
+        var text2 = item
+        var text3 = item
+        function findIndex(str, char) {
+          const strLength = str.length
+          const indexes = []
+          let newStr = str
+          while (newStr && newStr.indexOf(char) > -1) {
+            indexes.push(newStr.indexOf(char) + strLength - newStr.length)
+            newStr = newStr.substring(newStr.indexOf(char) + 1)
+            newStr = newStr.substring(newStr.indexOf(char) + 1)
+          }
+          return indexes
+        }
+        let chars = text1.split('')
+        let indexs = []
+        chars.map((i) => {
+          let findIndexes = findIndex(text3, i)
+          if (findIndexes.length > 0) {
+            text3 = text3.split('')
+            text3[findIndexes] = '$'
+            text3 = text3.join('')
+            indexs = [...indexs, ...findIndexes]
+          }
+        })
+        let itemHtml = ''
+        text2.split('').map((itemValue, index) => {
+          let check = indexs.find((i) => i === index)
+          if (check !== undefined) {
+            itemHtml += `${itemValue}`
+          } else {
+            itemHtml += `<span class='highlight'>${itemValue}</span>`
+          }
+        })
+      
+        
         return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
-        <li>${item}
+        <li>${itemHtml}
           <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
             </li></a>`
       })
@@ -245,8 +329,42 @@ function sortPointsby(sortValue, data, i) {
       })
     })
     const result = newArray.map((item) => {
-      return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
-      <li>${item.words}
+      var text1 = serachValue.replace('?', '')
+        var text2 = item.words
+        var text3 = item.words
+        function findIndex(str, char) {
+          const strLength = str.length
+          const indexes = []
+          let newStr = str
+          while (newStr && newStr.indexOf(char) > -1) {
+            indexes.push(newStr.indexOf(char) + strLength - newStr.length)
+            newStr = newStr.substring(newStr.indexOf(char) + 1)
+            newStr = newStr.substring(newStr.indexOf(char) + 1)
+          }
+          return indexes
+        }
+        let chars = text1.split('')
+        let indexs = []
+        chars.map((i) => {
+          let findIndexes = findIndex(text3, i)
+          if (findIndexes.length > 0) {
+            text3 = text3.split('')
+            text3[findIndexes] = '$'
+            text3 = text3.join('')
+            indexs = [...indexs, ...findIndexes]
+          }
+        })
+        let itemHtml = ''
+        text2.split('').map((itemValue, index) => {
+          let check = indexs.find((i) => i === index)
+          if (check !== undefined) {
+            itemHtml += `${itemValue}`
+          } else {
+            itemHtml += `<span class='highlight'>${itemValue}</span>`
+          }
+        })
+      return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
+      <li>${itemHtml}
     <span class="points" value="${item.points}" style="position:relative; top:4px; font-size:12px"> ${item.points}</span>
       </li></a>`
     })
@@ -265,7 +383,6 @@ function sortPointsby(sortValue, data, i) {
     `
   }
 }
-
 // sort by aplhabets
 function sortby(sortBool, data, i) {
   if (sortBool) {
@@ -278,8 +395,44 @@ function sortby(sortBool, data, i) {
       for (let i = 0; i < item.length; i++) {
         sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
       }
-      return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
-            <li>${item}
+
+      var text1 = serachValue.replace('?', '')
+      var text2 = item
+      var text3 = item
+      function findIndex(str, char) {
+        const strLength = str.length
+        const indexes = []
+        let newStr = str
+        while (newStr && newStr.indexOf(char) > -1) {
+          indexes.push(newStr.indexOf(char) + strLength - newStr.length)
+          newStr = newStr.substring(newStr.indexOf(char) + 1)
+          newStr = newStr.substring(newStr.indexOf(char) + 1)
+        }
+        return indexes
+      }
+      let chars = text1.split('')
+      let indexs = []
+      chars.map((i) => {
+        let findIndexes = findIndex(text3, i)
+        if (findIndexes.length > 0) {
+          text3 = text3.split('')
+          text3[findIndexes] = '$'
+          text3 = text3.join('')
+          indexs = [...indexs, ...findIndexes]
+        }
+      })
+      let itemHtml = ''
+      text2.split('').map((itemValue, index) => {
+        let check = indexs.find((i) => i === index)
+        if (check !== undefined) {
+          itemHtml += `${itemValue}`
+        } else {
+          itemHtml += `<span class='highlight'>${itemValue}</span>`
+        }
+      })
+    
+      return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
+            <li>${itemHtml}
         <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
           </li></a>`
     })
@@ -307,8 +460,44 @@ function sortby(sortBool, data, i) {
       for (let i = 0; i < item.length; i++) {
         sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
       }
-      return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
-              <li>${item}
+
+      var text1 = serachValue.replace('?', '')
+      var text2 = item
+      var text3 = item
+      function findIndex(str, char) {
+        const strLength = str.length
+        const indexes = []
+        let newStr = str
+        while (newStr && newStr.indexOf(char) > -1) {
+          indexes.push(newStr.indexOf(char) + strLength - newStr.length)
+          newStr = newStr.substring(newStr.indexOf(char) + 1)
+          newStr = newStr.substring(newStr.indexOf(char) + 1)
+        }
+        return indexes
+      }
+      let chars = text1.split('')
+      let indexs = []
+      chars.map((i) => {
+        let findIndexes = findIndex(text3, i)
+        if (findIndexes.length > 0) {
+          text3 = text3.split('')
+          text3[findIndexes] = '$'
+          text3 = text3.join('')
+          indexs = [...indexs, ...findIndexes]
+        }
+      })
+      let itemHtml = ''
+      text2.split('').map((itemValue, index) => {
+        let check = indexs.find((i) => i === index)
+        if (check !== undefined) {
+          itemHtml += `${itemValue}`
+        } else {
+          itemHtml += `<span class='highlight'>${itemValue}</span>`
+        }
+      })
+    
+      return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
+              <li>${itemHtml}
           <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
             </li></a>`
     })

data/assets/js/wordScrabble.js

@@ -321,6 +321,8 @@ function sortPointsby(sortValue, data) {
           var text1 = serachValue.replace('?', '')
           var text2 = item.words
           var text3 = item.words
+           
+         
           function findIndex(str, char) {
             const strLength = str.length
             const indexes = []
@@ -352,7 +354,7 @@ function sortPointsby(sortValue, data) {
               itemHtml += `<span class='highlight'>${itemValue}</span>`
             }
           })
-          return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
+          return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
           <li>${itemHtml}
         <span class="points" value="${item.points}" style="position:relative; top:4px; font-size:12px"> ${item.points}</span>
           </li></a>`
@@ -424,7 +426,7 @@ function sortby(sortBool, data) {
               sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
             }
 
-            return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
+            return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
             <li>${itemHtml}
         <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
           </li></a>`
@@ -487,7 +489,7 @@ function sortby(sortBool, data) {
               sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
             }
 
-            return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
+            return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
             <li>${itemHtml}
         <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
           </li></a>`

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: word-games-theme
 version: !ruby/object:Gem::Version
-  version: 0.7.9
+  version: 0.8.3
 platform: ruby
 authors:
 - manpreet-appscms
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-01-29 00:00:00.000000000 Z
+date: 2022-02-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -76,6 +76,7 @@ files:
 - _data/header/en/data.json
 - _data/theme/colors.json
 - _data/wordfinderstrategy/en/how-to-use-5-letter-word-finder-to-score-high-in-scrabble-words-with-friends.json
+- _data/wordgames/en/4_letter_words_with_these_letters_and_a_blank.json
 - _data/wordgames/en/anagram_word_finder.json
 - _data/wordgames/en/eight_letter_word_finder.json
 - _data/wordgames/en/eleven_letter_word_finder.json