word-games-theme 0.8.0 → 0.8.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5b383e2d2ca991f0df8c99706aea73184eed922cad3c6207e9144f3795c3a38d
-  data.tar.gz: b70abbe49809438065ff3f2b8e8e9611633a1ab8cbf292c7f6eae8b344a80f9e
+  metadata.gz: 4dfbfd3aa728608a1e06b913a3c955dc30f3d4feed24d0ffcb24ce7df5ff4dd0
+  data.tar.gz: 174c75676ad30418213582cf81ec636a070253951cdf80ac87eb65f59158ac1b
 SHA512:
-  metadata.gz: 23a74f922f3fd3a6301aa07618809a0894f7089c0fccce5e2e2e919c909b7d73963ee50527fcada52ced63dc40a0c27f6907dac2b140757f73ec228183f167aa
-  data.tar.gz: ee7afc262a84181335b87320eb085c2cb65ffba4df67805e590acb0ffc5f8e0a2eae530b3b9f50035297bb1e5de01c443ae7f713d265906d8e7093095da61e3f
+  metadata.gz: 568d30c68d6bf4707baab2ef81215713d8019a7013c3bdb8e51052b0ca1700ce21e6b663f536c22704f2b91f741ef6e7c89870b4303999293ceaa3d23e3c47a0
+  data.tar.gz: 4f34f04c02fb78b529ffb8dc3645d7f287510025424f92b383b930159771cb59d9aef2d2b6bd6739e62ecd87862d2d96565e52c049b5a7ff9c215392c2dbc862

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/header/resultHeader.html

@@ -0,0 +1,42 @@
+{% assign lang = page.lang %}
+{% assign dataToShow = site.data.header[lang].data %}
+{%- assign CustomColor = site.data.theme.colors -%}
+
+<!-- header starts -->
+<header id="resultHeader">
+    <!-- navigation startss -->
+    <nav class="navbar navbar-expand-lg navbar-dark" style="background: {{CustomColor.navbarBg}}">
+
+        <a class="navbar-brand" href="/" title="{{dataToShow.tooltip}}">
+            <img src="{{ site.favicon | relative_url }}" alt="{{site.name}}-logo" style="width:35px; height:35px;">
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
+            <i class="bi bi-list bi-2x bars"></i>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" href="/blog">Blog</a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" aria-haspopup="true"
+                        aria-expanded="false">
+                        More
+                    </a>
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+
+                        {% for item in dataToShow.more %}
+                        <a class="dropdown-item" href="{{item.url}}">
+                            {{item.name}}
+                        </a>
+                        {% endfor %}
+
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </nav>
+    <!-- navbar close -->
+</header>
+<!-- header close -->

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>

data/_layouts/default.html

@@ -57,8 +57,10 @@
     <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")
             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

@@ -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,13 +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,6 +26,16 @@ tab_link_wrapper.style.display = "none"
 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, '')
@@ -80,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(
@@ -93,7 +106,7 @@ function x_with_letters(data) {
     if (letterLen) {
       filterData = data.filter((item) => item.length == letterLen)
     }
-  
+
 
     if (prefixValue) {
       filterData = filterData.filter((item2) =>
@@ -316,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>`
     })
@@ -336,7 +383,6 @@ function sortPointsby(sortValue, data, i) {
     `
   }
 }
-
 // sort by aplhabets
 function sortby(sortBool, data, i) {
   if (sortBool) {
@@ -349,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>`
     })
@@ -378,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

@@ -354,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>`
@@ -426,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>`
@@ -489,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.8.0
+  version: 0.8.4
 platform: ruby
 authors:
 - manpreet-appscms
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-02-01 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
@@ -116,6 +117,7 @@ files:
 - _includes/head/index.html
 - _includes/header/blogHeader.html
 - _includes/header/index.html
+- _includes/header/resultHeader.html
 - _includes/paginationBlogPage.html
 - _includes/paginationPostPage.html
 - _includes/postauthorbio.html