Adding a Time Counter


Author
Message
chenxyu
chenxyu
Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)
Group: Forum Members
Posts: 18, Visits: 252

Dave - 6/15/2022
Dave - 6/15/2022
chenxyu - 6/15/2022
Dave - 6/15/2022
chenxyu - 6/15/2022
Dave - 6/15/2022
chenxyu - 6/15/2022
Thank you, Dave! Can I ask you another question? As you can see, I included an HTML file in my script. The HTML file is a word search puzzle that I plan to ask my participants to solve. The HTML is programmed in a way that those who successfully solve the puzzle will get a correct feedback message. Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

> Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

No, Inquisit doesn't have any access to whatever it is the HTML code does. If said word search puzzle isn't too complicated (I don't have your HTML file, so I have no idea how exactly the puzzle looks like), the better option would be to implement the puzzle directly in Inquisit syntax.
I'm attaching the HTML source code here. Would something like this be possibly implenmented in Inquisit?

<!doctype html>

<html>
    <head>
        <script>


            window.onload = function() {
                for (let node of document.querySelectorAll("td")) {
                    
                    node.onclick = function () {
                        if (!node.classList.contains("selected")) {
                            node.classList.add("selected")
                        } else {
                            node.classList.remove("selected")
                        }
                    }
                    if (node.textContent != "") continue;
                    let charCode = Math.round(65 + Math.random() * 25)
                    node.textContent = String.fromCharCode(charCode)
                }

                const table = document.querySelector("[data-search-area]")
                const result = document.querySelector("[data-display-result")

                let targetElement = new Map()

                const defaultAnswer = ["SEARCH","MISSING","FOR","PERSONS"]

                table.addEventListener("click", e => {
                    if(e.target.tagName.toLowerCase() === "td"){
                        const answerClassName = e.target.classList[0]
                        if(defaultAnswer.indexOf(answerClassName) !== -1){

                            targetElement.set(answerClassName,(targetElement.get(answerClassName) || new Set()).add(e.target))
                            
                            if(targetElement.get(answerClassName).size === answerClassName.length){
                                for(let element of targetElement.get(answerClassName)){
                                    element.style.backgroundColor = "tomato"
                                }
                            }
                        }

                        if(targetElement.size === defaultAnswer.length){
                            if([...targetElement.keys()].every(key => targetElement.get(key).size === key.length)){
                                result.innerHTML = "<p class='result'>Great Job!</p>"
                                console.log("YES")
                            }
                        }
                    }
                })

            }





        </script>    
        <style>
            *{
                margin: 0;
                padding: 0;
            }


            ul li {
                list-style-type: none;
            }

            td.correct {
                background-color: tomato;
            }

            table {
                border-collapse: collapse;
                background-color: lightyellow;
            }

            td {
                cursor: pointer;
                border: 1px solid black;
                width: 40px;
                height: 40px;
                text-align:center;
            }

            td.selected {
                background-color: limegreen;
            }
            h1 {
                font-family: cursive;
                color:blue;
                text-align:center;
            }
            li {
                color:red;
                font-size:18;
            }

            .result{
                color:green;
            }

            body{
                display: flex;
                margin: auto;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .content_wrapper{
                display: flex;
            }

            .words{
                margin-left: 1rem;
            }

            .clues{
                margin-top: 1rem;
            }

        </style>
    </head>
    <body>
        <h1>Word Search</h1>
        <div class="content_wrapper">
        <table data-search-area>
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">S</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">M</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">E</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">I</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">A</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">S</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">R</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">S</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">C</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">I</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">H</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">N</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">G</td>
                <td></td>
            </tr>    
            <tr>
                <td class="PERSONS">P</td>
                <td class="PERSONS">E</td>
                <td class="PERSONS">R</td>
                <td class="PERSONS">S</td>
                <td class="PERSONS">O</td>
                <td class="PERSONS">N</td>
                <td class="PERSONS">S</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">F</td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">O</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">R</td>
            </tr>        
            </table>
            <ul class="words" data-display-result>
                    <li>Word 1</li>
                    <li>Word 2</li>
                    <li>Word 3</li>
                    <li>Word 4</li>
            </ul>
        </div>
            <ul class="clues">
                <li> Hint: A task we asked you to perform in this experiment </li>
            </ul>
    </body>
</html>




Yeah, it'd be a bit of work, but it's doable.

Thank you, Dave. Would you offer some suggestions? How would you go about creating a word grid and making the letters highlightable?

Your grid will consist of 12 x 12 = 124 separate text elements, positioned as need to form the grid. Your trial's valid responses will be the 124 text elements. When a given text element is clicked, you can change its backgroud color to "highlight" it per /ontrialend logic.

Here's a basic sketch of how this would work:

<block wordsearchblock>
/ bgstim = (timer)
/ trials = [1=wordsearch]
/ timeout = 180000
</block>

<clock timer>
/ mode = timer
/ resetrate = block
/ txcolor = black
/ txbgcolor = cadetblue
/ timeout = 180000
/ position = (90%, 90%)
/ format = "mm:ss"
/ size = (5%, 5%)
</clock>

<expressions>
/ setboxcolors =
    if (list.active.indexof("1_1") != -1) {
        text.1_1.textbgcolor = yellowgreen;
    } else {
        text.1_1.textbgcolor = beige;
    };
    if (list.active.indexof("1_2") != -1) {
        text.1_2.textbgcolor = yellowgreen;
    } else {
        text.1_2.textbgcolor = beige;
    };
    if (list.active.indexof("1_3") != -1) {
        text.1_3.textbgcolor = yellowgreen;
    } else {
        text.1_3.textbgcolor = beige;
    };
    if (list.active.indexof("1_4") != -1) {
        text.1_4.textbgcolor = yellowgreen;
    } else {
        text.1_4.textbgcolor = beige;
    };
    if (list.active.indexof("1_5") != -1) {
        text.1_5.textbgcolor = yellowgreen;
    } else {
        text.1_5.textbgcolor = beige;
    };
    if (list.active.indexof("1_6") != -1) {
        text.1_6.textbgcolor = yellowgreen;
    } else {
        text.1_6.textbgcolor = beige;
    };
    if (list.active.indexof("1_7") != -1) {
        text.1_7.textbgcolor = yellowgreen;
    } else {
        text.1_7.textbgcolor = beige;
    };
    if (list.active.indexof("1_8") != -1) {
        text.1_8.textbgcolor = yellowgreen;
    } else {
        text.1_8.textbgcolor = beige;
    };
    if (list.active.indexof("1_9") != -1) {
        text.1_9.textbgcolor = yellowgreen;
    } else {
        text.1_9.textbgcolor = beige;
    };
    if (list.active.indexof("1_10") != -1) {
        text.1_10.textbgcolor = yellowgreen;
    } else {
        text.1_10.textbgcolor = beige;
    };
    if (list.active.indexof("1_11") != -1) {
        text.1_11.textbgcolor = yellowgreen;
    } else {
        text.1_11.textbgcolor = beige;
    };
    if (list.active.indexof("1_12") != -1) {
        text.1_12.textbgcolor = yellowgreen;
    } else {
        text.1_12.textbgcolor = beige;
    };

    if (list.active.indexof("2_1") != -1) {
        text.2_1.textbgcolor = yellowgreen;
    } else {
        text.2_1.textbgcolor = beige;
    };
    if (list.active.indexof("2_2") != -1) {
        text.2_2.textbgcolor = yellowgreen;
    } else {
        text.2_2.textbgcolor = beige;
    };
    if (list.active.indexof("2_3") != -1) {
        text.2_3.textbgcolor = yellowgreen;
    } else {
        text.2_3.textbgcolor = beige;
    };
    if (list.active.indexof("2_4") != -1) {
        text.2_4.textbgcolor = yellowgreen;
    } else {
        text.2_4.textbgcolor = beige;
    };
    if (list.active.indexof("2_5") != -1) {
        text.2_5.textbgcolor = yellowgreen;
    } else {
        text.2_5.textbgcolor = beige;
    };
    if (list.active.indexof("2_6") != -1) {
        text.2_6.textbgcolor = yellowgreen;
    } else {
        text.2_6.textbgcolor = beige;
    };
    if (list.active.indexof("2_7") != -1) {
        text.2_7.textbgcolor = yellowgreen;
    } else {
        text.2_7.textbgcolor = beige;
    };
    if (list.active.indexof("2_8") != -1) {
        text.2_8.textbgcolor = yellowgreen;
    } else {
        text.2_8.textbgcolor = beige;
    };
    if (list.active.indexof("2_9") != -1) {
        text.2_9.textbgcolor = yellowgreen;
    } else {
        text.2_9.textbgcolor = beige;
    };
    if (list.active.indexof("2_10") != -1) {
        text.2_10.textbgcolor = yellowgreen;
    } else {
        text.2_10.textbgcolor = beige;
    };
    if (list.active.indexof("2_11") != -1) {
        text.2_11.textbgcolor = yellowgreen;
    } else {
        text.2_11.textbgcolor = beige;
    };
    if (list.active.indexof("2_12") != -1) {
        text.2_12.textbgcolor = yellowgreen;
    } else {
        text.2_12.textbgcolor = beige;
    };

    if (list.active.indexof("3_1") != -1) {
        text.3_1.textbgcolor = yellowgreen;
    } else {
        text.3_1.textbgcolor = beige;
    };
    if (list.active.indexof("3_2") != -1) {
        text.3_2.textbgcolor = yellowgreen;
    } else {
        text.3_2.textbgcolor = beige;
    };
    if (list.active.indexof("3_3") != -1) {
        text.3_3.textbgcolor = yellowgreen;
    } else {
        text.3_3.textbgcolor = beige;
    };
    if (list.active.indexof("3_4") != -1) {
        text.3_4.textbgcolor = yellowgreen;
    } else {
        text.3_4.textbgcolor = beige;
    };
    if (list.active.indexof("3_5") != -1) {
        text.3_5.textbgcolor = yellowgreen;
    } else {
        text.3_5.textbgcolor = beige;
    };
    if (list.active.indexof("3_6") != -1) {
        text.3_6.textbgcolor = yellowgreen;
    } else {
        text.3_6.textbgcolor = beige;
    };
    if (list.active.indexof("3_7") != -1) {
        text.3_7.textbgcolor = yellowgreen;
    } else {
        text.3_7.textbgcolor = beige;
    };
    if (list.active.indexof("3_8") != -1) {
        text.3_8.textbgcolor = yellowgreen;
    } else {
        text.3_8.textbgcolor = beige;
    };
    if (list.active.indexof("3_9") != -1) {
        text.3_9.textbgcolor = yellowgreen;
    } else {
        text.3_9.textbgcolor = beige;
    };
    if (list.active.indexof("3_10") != -1) {
        text.3_10.textbgcolor = yellowgreen;
    } else {
        text.3_10.textbgcolor = beige;
    };
    if (list.active.indexof("3_11") != -1) {
        text.3_11.textbgcolor = yellowgreen;
    } else {
        text.3_11.textbgcolor = beige;
    };
    if (list.active.indexof("3_12") != -1) {
        text.3_12.textbgcolor = yellowgreen;
    } else {
        text.3_12.textbgcolor = beige;
    };

    if (list.active.indexof("4_1") != -1) {
        text.4_1.textbgcolor = yellowgreen;
    } else {
        text.4_1.textbgcolor = beige;
    };
    if (list.active.indexof("4_2") != -1) {
        text.4_2.textbgcolor = yellowgreen;
    } else {
        text.4_2.textbgcolor = beige;
    };
    if (list.active.indexof("4_3") != -1) {
        text.4_3.textbgcolor = yellowgreen;
    } else {
        text.4_3.textbgcolor = beige;
    };
    if (list.active.indexof("4_4") != -1) {
        text.4_4.textbgcolor = yellowgreen;
    } else {
        text.4_4.textbgcolor = beige;
    };
    if (list.active.indexof("4_5") != -1) {
        text.4_5.textbgcolor = yellowgreen;
    } else {
        text.4_5.textbgcolor = beige;
    };
    if (list.active.indexof("4_6") != -1) {
        text.4_6.textbgcolor = yellowgreen;
    } else {
        text.4_6.textbgcolor = beige;
    };
    if (list.active.indexof("4_7") != -1) {
        text.4_7.textbgcolor = yellowgreen;
    } else {
        text.4_7.textbgcolor = beige;
    };
    if (list.active.indexof("4_8") != -1) {
        text.4_8.textbgcolor = yellowgreen;
    } else {
        text.4_8.textbgcolor = beige;
    };
    if (list.active.indexof("4_9") != -1) {
        text.4_9.textbgcolor = yellowgreen;
    } else {
        text.4_9.textbgcolor = beige;
    };
    if (list.active.indexof("4_10") != -1) {
        text.4_10.textbgcolor = yellowgreen;
    } else {
        text.4_10.textbgcolor = beige;
    };
    if (list.active.indexof("4_11") != -1) {
        text.4_11.textbgcolor = yellowgreen;
    } else {
        text.4_11.textbgcolor = beige;
    };
    if (list.active.indexof("4_12") != -1) {
        text.4_12.textbgcolor = yellowgreen;
    } else {
        text.4_12.textbgcolor = beige;
    };

    if (list.active.indexof("5_1") != -1) {
        text.5_1.textbgcolor = yellowgreen;
    } else {
        text.5_1.textbgcolor = beige;
    };
    if (list.active.indexof("5_2") != -1) {
        text.5_2.textbgcolor = yellowgreen;
    } else {
        text.5_2.textbgcolor = beige;
    };
    if (list.active.indexof("5_3") != -1) {
        text.5_3.textbgcolor = yellowgreen;
    } else {
        text.5_3.textbgcolor = beige;
    };
    if (list.active.indexof("5_4") != -1) {
        text.5_4.textbgcolor = yellowgreen;
    } else {
        text.5_4.textbgcolor = beige;
    };
    if (list.active.indexof("5_5") != -1) {
        text.5_5.textbgcolor = yellowgreen;
    } else {
        text.5_5.textbgcolor = beige;
    };
    if (list.active.indexof("5_6") != -1) {
        text.5_6.textbgcolor = yellowgreen;
    } else {
        text.5_6.textbgcolor = beige;
    };
    if (list.active.indexof("5_7") != -1) {
        text.5_7.textbgcolor = yellowgreen;
    } else {
        text.5_7.textbgcolor = beige;
    };
    if (list.active.indexof("5_8") != -1) {
        text.5_8.textbgcolor = yellowgreen;
    } else {
        text.5_8.textbgcolor = beige;
    };
    if (list.active.indexof("5_9") != -1) {
        text.5_9.textbgcolor = yellowgreen;
    } else {
        text.5_9.textbgcolor = beige;
    };
    if (list.active.indexof("5_10") != -1) {
        text.5_10.textbgcolor = yellowgreen;
    } else {
        text.5_10.textbgcolor = beige;
    };
    if (list.active.indexof("5_11") != -1) {
        text.5_11.textbgcolor = yellowgreen;
    } else {
        text.5_11.textbgcolor = beige;
    };
    if (list.active.indexof("5_12") != -1) {
        text.5_12.textbgcolor = yellowgreen;
    } else {
        text.5_12.textbgcolor = beige;
    };

    if (list.active.indexof("6_1") != -1) {
        text.6_1.textbgcolor = yellowgreen;
    } else {
        text.6_1.textbgcolor = beige;
    };
    if (list.active.indexof("6_2") != -1) {
        text.6_2.textbgcolor = yellowgreen;
    } else {
        text.6_2.textbgcolor = beige;
    };
    if (list.active.indexof("6_3") != -1) {
        text.6_3.textbgcolor = yellowgreen;
    } else {
        text.6_3.textbgcolor = beige;
    };
    if (list.active.indexof("6_4") != -1) {
        text.6_4.textbgcolor = yellowgreen;
    } else {
        text.6_4.textbgcolor = beige;
    };
    if (list.active.indexof("6_5") != -1) {
        text.6_5.textbgcolor = yellowgreen;
    } else {
        text.6_5.textbgcolor = beige;
    };
    if (list.active.indexof("6_6") != -1) {
        text.6_6.textbgcolor = yellowgreen;
    } else {
        text.6_6.textbgcolor = beige;
    };
    if (list.active.indexof("6_7") != -1) {
        text.6_7.textbgcolor = yellowgreen;
    } else {
        text.6_7.textbgcolor = beige;
    };
    if (list.active.indexof("6_8") != -1) {
        text.6_8.textbgcolor = yellowgreen;
    } else {
        text.6_8.textbgcolor = beige;
    };
    if (list.active.indexof("6_9") != -1) {
        text.6_9.textbgcolor = yellowgreen;
    } else {
        text.6_9.textbgcolor = beige;
    };
    if (list.active.indexof("6_10") != -1) {
        text.6_10.textbgcolor = yellowgreen;
    } else {
        text.6_10.textbgcolor = beige;
    };
    if (list.active.indexof("6_11") != -1) {
        text.6_11.textbgcolor = yellowgreen;
    } else {
        text.6_11.textbgcolor = beige;
    };
    if (list.active.indexof("6_12") != -1) {
        text.6_12.textbgcolor = yellowgreen;
    } else {
        text.6_12.textbgcolor = beige;
    };

    if (list.active.indexof("7_1") != -1) {
        text.7_1.textbgcolor = yellowgreen;
    } else {
        text.7_1.textbgcolor = beige;
    };
    if (list.active.indexof("7_2") != -1) {
        text.7_2.textbgcolor = yellowgreen;
    } else {
        text.7_2.textbgcolor = beige;
    };
    if (list.active.indexof("7_3") != -1) {
        text.7_3.textbgcolor = yellowgreen;
    } else {
        text.7_3.textbgcolor = beige;
    };
    if (list.active.indexof("7_4") != -1) {
        text.7_4.textbgcolor = yellowgreen;
    } else {
        text.7_4.textbgcolor = beige;
    };
    if (list.active.indexof("7_5") != -1) {
        text.7_5.textbgcolor = yellowgreen;
    } else {
        text.7_5.textbgcolor = beige;
    };
    if (list.active.indexof("7_6") != -1) {
        text.7_6.textbgcolor = yellowgreen;
    } else {
        text.7_6.textbgcolor = beige;
    };
    if (list.active.indexof("7_7") != -1) {
        text.7_7.textbgcolor = yellowgreen;
    } else {
        text.7_7.textbgcolor = beige;
    };
    if (list.active.indexof("7_8") != -1) {
        text.7_8.textbgcolor = yellowgreen;
    } else {
        text.7_8.textbgcolor = beige;
    };
    if (list.active.indexof("7_9") != -1) {
        text.7_9.textbgcolor = yellowgreen;
    } else {
        text.7_9.textbgcolor = beige;
    };
    if (list.active.indexof("7_10") != -1) {
        text.7_10.textbgcolor = yellowgreen;
    } else {
        text.7_10.textbgcolor = beige;
    };
    if (list.active.indexof("7_11") != -1) {
        text.7_11.textbgcolor = yellowgreen;
    } else {
        text.7_11.textbgcolor = beige;
    };
    if (list.active.indexof("7_12") != -1) {
        text.7_12.textbgcolor = yellowgreen;
    } else {
        text.7_12.textbgcolor = beige;
    };

    if (list.active.indexof("8_1") != -1) {
        text.8_1.textbgcolor = yellowgreen;
    } else {
        text.8_1.textbgcolor = beige;
    };
    if (list.active.indexof("8_2") != -1) {
        text.8_2.textbgcolor = yellowgreen;
    } else {
        text.8_2.textbgcolor = beige;
    };
    if (list.active.indexof("8_3") != -1) {
        text.8_3.textbgcolor = yellowgreen;
    } else {
        text.8_3.textbgcolor = beige;
    };
    if (list.active.indexof("8_4") != -1) {
        text.8_4.textbgcolor = yellowgreen;
    } else {
        text.8_4.textbgcolor = beige;
    };
    if (list.active.indexof("8_5") != -1) {
        text.8_5.textbgcolor = yellowgreen;
    } else {
        text.8_5.textbgcolor = beige;
    };
    if (list.active.indexof("8_6") != -1) {
        text.8_6.textbgcolor = yellowgreen;
    } else {
        text.8_6.textbgcolor = beige;
    };
    if (list.active.indexof("8_7") != -1) {
        text.8_7.textbgcolor = yellowgreen;
    } else {
        text.8_7.textbgcolor = beige;
    };
    if (list.active.indexof("8_8") != -1) {
        text.8_8.textbgcolor = yellowgreen;
    } else {
        text.8_8.textbgcolor = beige;
    };
    if (list.active.indexof("8_9") != -1) {
        text.8_9.textbgcolor = yellowgreen;
    } else {
        text.8_9.textbgcolor = beige;
    };
    if (list.active.indexof("8_10") != -1) {
        text.8_10.textbgcolor = yellowgreen;
    } else {
        text.8_10.textbgcolor = beige;
    };
    if (list.active.indexof("8_11") != -1) {
        text.8_11.textbgcolor = yellowgreen;
    } else {
        text.8_11.textbgcolor = beige;
    };
    if (list.active.indexof("8_12") != -1) {
        text.8_12.textbgcolor = yellowgreen;
    } else {
        text.8_12.textbgcolor = beige;
    };

    if (list.active.indexof("9_1") != -1) {
        text.9_1.textbgcolor = yellowgreen;
    } else {
        text.9_1.textbgcolor = beige;
    };
    if (list.active.indexof("9_2") != -1) {
        text.9_2.textbgcolor = yellowgreen;
    } else {
        text.9_2.textbgcolor = beige;
    };
    if (list.active.indexof("9_3") != -1) {
        text.9_3.textbgcolor = yellowgreen;
    } else {
        text.9_3.textbgcolor = beige;
    };
    if (list.active.indexof("9_4") != -1) {
        text.9_4.textbgcolor = yellowgreen;
    } else {
        text.9_4.textbgcolor = beige;
    };
    if (list.active.indexof("9_5") != -1) {
        text.9_5.textbgcolor = yellowgreen;
    } else {
        text.9_5.textbgcolor = beige;
    };
    if (list.active.indexof("9_6") != -1) {
        text.9_6.textbgcolor = yellowgreen;
    } else {
        text.9_6.textbgcolor = beige;
    };
    if (list.active.indexof("9_7") != -1) {
        text.9_7.textbgcolor = yellowgreen;
    } else {
        text.9_7.textbgcolor = beige;
    };
    if (list.active.indexof("9_8") != -1) {
        text.9_8.textbgcolor = yellowgreen;
    } else {
        text.9_8.textbgcolor = beige;
    };
    if (list.active.indexof("9_9") != -1) {
        text.9_9.textbgcolor = yellowgreen;
    } else {
        text.9_9.textbgcolor = beige;
    };
    if (list.active.indexof("9_10") != -1) {
        text.9_10.textbgcolor = yellowgreen;
    } else {
        text.9_10.textbgcolor = beige;
    };
    if (list.active.indexof("9_11") != -1) {
        text.9_11.textbgcolor = yellowgreen;
    } else {
        text.9_11.textbgcolor = beige;
    };
    if (list.active.indexof("9_12") != -1) {
        text.9_12.textbgcolor = yellowgreen;
    } else {
        text.9_12.textbgcolor = beige;
    };

    if (list.active.indexof("10_1") != -1) {
        text.10_1.textbgcolor = yellowgreen;
    } else {
        text.10_1.textbgcolor = beige;
    };
    if (list.active.indexof("10_2") != -1) {
        text.10_2.textbgcolor = yellowgreen;
    } else {
        text.10_2.textbgcolor = beige;
    };
    if (list.active.indexof("10_3") != -1) {
        text.10_3.textbgcolor = yellowgreen;
    } else {
        text.10_3.textbgcolor = beige;
    };
    if (list.active.indexof("10_4") != -1) {
        text.10_4.textbgcolor = yellowgreen;
    } else {
        text.10_4.textbgcolor = beige;
    };
    if (list.active.indexof("10_5") != -1) {
        text.10_5.textbgcolor = yellowgreen;
    } else {
        text.10_5.textbgcolor = beige;
    };
    if (list.active.indexof("10_6") != -1) {
        text.10_6.textbgcolor = yellowgreen;
    } else {
        text.10_6.textbgcolor = beige;
    };
    if (list.active.indexof("10_7") != -1) {
        text.10_7.textbgcolor = yellowgreen;
    } else {
        text.10_7.textbgcolor = beige;
    };
    if (list.active.indexof("10_8") != -1) {
        text.10_8.textbgcolor = yellowgreen;
    } else {
        text.10_8.textbgcolor = beige;
    };
    if (list.active.indexof("10_9") != -1) {
        text.10_9.textbgcolor = yellowgreen;
    } else {
        text.10_9.textbgcolor = beige;
    };
    if (list.active.indexof("10_10") != -1) {
        text.10_10.textbgcolor = yellowgreen;
    } else {
        text.10_10.textbgcolor = beige;
    };
    if (list.active.indexof("10_11") != -1) {
        text.10_11.textbgcolor = yellowgreen;
    } else {
        text.10_11.textbgcolor = beige;
    };
    if (list.active.indexof("10_12") != -1) {
        text.10_12.textbgcolor = yellowgreen;
    } else {
        text.10_12.textbgcolor = beige;
    };

    if (list.active.indexof("11_1") != -1) {
        text.11_1.textbgcolor = yellowgreen;
    } else {
        text.11_1.textbgcolor = beige;
    };
    if (list.active.indexof("11_2") != -1) {
        text.11_2.textbgcolor = yellowgreen;
    } else {
        text.11_2.textbgcolor = beige;
    };
    if (list.active.indexof("11_3") != -1) {
        text.11_3.textbgcolor = yellowgreen;
    } else {
        text.11_3.textbgcolor = beige;
    };
    if (list.active.indexof("11_4") != -1) {
        text.11_4.textbgcolor = yellowgreen;
    } else {
        text.11_4.textbgcolor = beige;
    };
    if (list.active.indexof("11_5") != -1) {
        text.11_5.textbgcolor = yellowgreen;
    } else {
        text.11_5.textbgcolor = beige;
    };
    if (list.active.indexof("11_6") != -1) {
        text.11_6.textbgcolor = yellowgreen;
    } else {
        text.11_6.textbgcolor = beige;
    };
    if (list.active.indexof("11_7") != -1) {
        text.11_7.textbgcolor = yellowgreen;
    } else {
        text.11_7.textbgcolor = beige;
    };
    if (list.active.indexof("11_8") != -1) {
        text.11_8.textbgcolor = yellowgreen;
    } else {
        text.11_8.textbgcolor = beige;
    };
    if (list.active.indexof("11_9") != -1) {
        text.11_9.textbgcolor = yellowgreen;
    } else {
        text.11_9.textbgcolor = beige;
    };
    if (list.active.indexof("11_10") != -1) {
        text.11_10.textbgcolor = yellowgreen;
    } else {
        text.11_10.textbgcolor = beige;
    };
    if (list.active.indexof("11_11") != -1) {
        text.11_11.textbgcolor = yellowgreen;
    } else {
        text.11_11.textbgcolor = beige;
    };
    if (list.active.indexof("11_12") != -1) {
        text.11_12.textbgcolor = yellowgreen;
    } else {
        text.11_12.textbgcolor = beige;
    };

    if (list.active.indexof("12_1") != -1) {
        text.12_1.textbgcolor = yellowgreen;
    } else {
        text.12_1.textbgcolor = beige;
    };
    if (list.active.indexof("12_2") != -1) {
        text.12_2.textbgcolor = yellowgreen;
    } else {
        text.12_2.textbgcolor = beige;
    };
    if (list.active.indexof("12_3") != -1) {
        text.12_3.textbgcolor = yellowgreen;
    } else {
        text.12_3.textbgcolor = beige;
    };
    if (list.active.indexof("12_4") != -1) {
        text.12_4.textbgcolor = yellowgreen;
    } else {
        text.12_4.textbgcolor = beige;
    };
    if (list.active.indexof("12_5") != -1) {
        text.12_5.textbgcolor = yellowgreen;
    } else {
        text.12_5.textbgcolor = beige;
    };
    if (list.active.indexof("12_6") != -1) {
        text.12_6.textbgcolor = yellowgreen;
    } else {
        text.12_6.textbgcolor = beige;
    };
    if (list.active.indexof("12_7") != -1) {
        text.12_7.textbgcolor = yellowgreen;
    } else {
        text.12_7.textbgcolor = beige;
    };
    if (list.active.indexof("12_8") != -1) {
        text.12_8.textbgcolor = yellowgreen;
    } else {
        text.12_8.textbgcolor = beige;
    };
    if (list.active.indexof("12_9") != -1) {
        text.12_9.textbgcolor = yellowgreen;
    } else {
        text.12_9.textbgcolor = beige;
    };
    if (list.active.indexof("12_10") != -1) {
        text.12_10.textbgcolor = yellowgreen;
    } else {
        text.12_10.textbgcolor = beige;
    };
    if (list.active.indexof("12_11") != -1) {
        text.12_11.textbgcolor = yellowgreen;
    } else {
        text.12_11.textbgcolor = beige;
    };
    if (list.active.indexof("12_12") != -1) {
        text.12_12.textbgcolor = yellowgreen;
    } else {
        text.12_12.textbgcolor = beige;
    };
    
/ checksolutions =
    if ((list.active.indexof("1_3") != -1)
    && (list.active.indexof("2_3") != -1)
    && (list.active.indexof("3_3") != -1)
    && (list.active.indexof("4_3") != -1)
    && (list.active.indexof("5_3") != -1)
    && (list.active.indexof("6_3") != -1)) {
        values.word1 = true;
        text.1_3.textbgcolor = tomato;
        text.2_3.textbgcolor = tomato;
        text.3_3.textbgcolor = tomato;
        text.4_3.textbgcolor = tomato;
        text.5_3.textbgcolor = tomato;
        text.6_3.textbgcolor = tomato;
        list.blocked.appenditem("1_3");
        list.blocked.appenditem("2_3");
        list.blocked.appenditem("3_3");
        list.blocked.appenditem("4_3");
        list.blocked.appenditem("5_3");
        list.blocked.appenditem("6_3");
    };
    if ((list.active.indexof("10_10") != -1)
    && (list.active.indexof("11_11") != -1)
    && (list.active.indexof("12_12") != -1)) {
        values.word2 = true;
        text.10_10.textbgcolor = tomato;
        text.11_11.textbgcolor = tomato;
        text.12_12.textbgcolor = tomato;
        list.blocked.appenditem("10_10");
        list.blocked.appenditem("11_11");
        list.blocked.appenditem("12_12");
    };
    if ((list.active.indexof("1_11") != -1)
    && (list.active.indexof("2_11") != -1)
    && (list.active.indexof("3_11") != -1)
    && (list.active.indexof("4_11") != -1)
    && (list.active.indexof("5_11") != -1)
    && (list.active.indexof("6_11") != -1)
    && (list.active.indexof("7_11") != -1)) {
        values.word3 = true;
        text.1_11.textbgcolor = tomato;
        text.2_11.textbgcolor = tomato;
        text.3_11.textbgcolor = tomato;
        text.4_11.textbgcolor = tomato;
        text.5_11.textbgcolor = tomato;
        text.6_11.textbgcolor = tomato;
        text.7_11.textbgcolor = tomato;
        list.blocked.appenditem("1_11");
        list.blocked.appenditem("2_11");
        list.blocked.appenditem("3_11");
        list.blocked.appenditem("4_11");
        list.blocked.appenditem("5_11");
        list.blocked.appenditem("6_11");
        list.blocked.appenditem("7_11");
    };
    if ((list.active.indexof("8_1") != -1)
    && (list.active.indexof("8_2") != -1)
    && (list.active.indexof("8_3") != -1)
    && (list.active.indexof("8_4") != -1)
    && (list.active.indexof("8_5") != -1)
    && (list.active.indexof("8_6") != -1)
    && (list.active.indexof("8_7") != -1)) {
        values.word4 = true;
        text.8_1.textbgcolor = tomato;
        text.8_2.textbgcolor = tomato;
        text.8_3.textbgcolor = tomato;
        text.8_4.textbgcolor = tomato;
        text.8_5.textbgcolor = tomato;
        text.8_6.textbgcolor = tomato;
        text.8_7.textbgcolor = tomato;
        list.blocked.appenditem("8_1");
        list.blocked.appenditem("8_2");
        list.blocked.appenditem("8_3");
        list.blocked.appenditem("8_4");
        list.blocked.appenditem("8_5");
        list.blocked.appenditem("8_6");
        list.blocked.appenditem("8_7");
    };
    
/ wordcount = (values.word1 + values.word2 + values.word3 + values.word4)
</expressions>

<values>
/ word1 = false
/ word2 = false
/ word3 = false
/ word4 = false
</values>


// SEARCH
<list word1>
/ items = ("1_3", "2_3", "3_3", "4_3", "5_3", "6_3")
</list>

// FOR
<list word2>
/ items = ("10_10", "11_11", "12_12")
</list>

// MISSING
<list word3>
/ items = ("1_11", "2_11", "3_11", "4_11", "5_11", "6_11", "7_11")
</list>

// PERSONS
<list word4>
/ items = ("8_1", "8_2", "8_3", "8_4", "8_5", "8_6", "8_7")
</list>

<list active>
</list>

<list blocked>
/ items = ("continue")
</list>

<trial wordsearch>
/ stimulusframes = [1=bg, 1_1, 1_2, 1_3, 1_4, 1_5, 1_6, 1_7, 1_8, 1_9, 1_10, 1_11, 1_12,
    2_1, 2_2, 2_3, 2_4, 2_5, 2_6, 2_7, 2_8, 2_9, 2_10, 2_11, 2_12,
    3_1, 3_2, 3_3, 3_4, 3_5, 3_6, 3_7, 3_8, 3_9, 3_10, 3_11, 3_12,
    4_1, 4_2, 4_3, 4_4, 4_5, 4_6, 4_7, 4_8, 4_9, 4_10, 4_11, 4_12,
    5_1, 5_2, 5_3, 5_4, 5_5, 5_6, 5_7, 5_8, 5_9, 5_10, 5_11, 5_12,
    6_1, 6_2, 6_3, 6_4, 6_5, 6_6, 6_7, 6_8, 6_9, 6_10, 6_11, 6_12,
    7_1, 7_2, 7_3, 7_4, 7_5, 7_6, 7_7, 7_8, 7_9, 7_10, 7_11, 7_12,
    8_1, 8_2, 8_3, 8_4, 8_5, 8_6, 8_7, 8_8, 8_9, 8_10, 8_11, 8_12,
    9_1, 9_2, 9_3, 9_4, 9_5, 9_6, 9_7, 9_8, 9_9, 9_10, 9_11, 9_12,
    10_1, 10_2, 10_3, 10_4, 10_5, 10_6, 10_7, 10_8, 10_9, 10_10, 10_11, 10_12,
    11_1, 11_2, 11_3, 11_4, 11_5, 11_6, 11_7, 11_8, 11_9, 11_10, 11_11, 11_12,
    12_1, 12_2, 12_3, 12_4, 12_5, 12_6, 12_7, 12_8, 12_9, 12_10, 12_11, 12_12,
    wordsfound, continue]
/ inputdevice = mouse
/ validresponse = (1_1, 1_2, 1_3, 1_4, 1_5, 1_6, 1_7, 1_8, 1_9, 1_10, 1_11, 1_12,
    2_1, 2_2, 2_3, 2_4, 2_5, 2_6, 2_7, 2_8, 2_9, 2_10, 2_11, 2_12,
    3_1, 3_2, 3_3, 3_4, 3_5, 3_6, 3_7, 3_8, 3_9, 3_10, 3_11, 3_12,
    4_1, 4_2, 4_3, 4_4, 4_5, 4_6, 4_7, 4_8, 4_9, 4_10, 4_11, 4_12,
    5_1, 5_2, 5_3, 5_4, 5_5, 5_6, 5_7, 5_8, 5_9, 5_10, 5_11, 5_12,
    6_1, 6_2, 6_3, 6_4, 6_5, 6_6, 6_7, 6_8, 6_9, 6_10, 6_11, 6_12,
    7_1, 7_2, 7_3, 7_4, 7_5, 7_6, 7_7, 7_8, 7_9, 7_10, 7_11, 7_12,
    8_1, 8_2, 8_3, 8_4, 8_5, 8_6, 8_7, 8_8, 8_9, 8_10, 8_11, 8_12,
    9_1, 9_2, 9_3, 9_4, 9_5, 9_6, 9_7, 9_8, 9_9, 9_10, 9_11, 9_12,
    10_1, 10_2, 10_3, 10_4, 10_5, 10_6, 10_7, 10_8, 10_9, 10_10, 10_11, 10_12,
    11_1, 11_2, 11_3, 11_4, 11_5, 11_6, 11_7, 11_8, 11_9, 11_10, 11_11, 11_12,
    12_1, 12_2, 12_3, 12_4, 12_5, 12_6, 12_7, 12_8, 12_9, 12_10, 12_11, 12_12, continue)
    
/ isvalidresponse = [
    list.blocked.indexof(trial.wordsearch.response) == -1 || (block.wordsearchblock.elapsedtime > 30000 && trial.wordsearch.response == "continue");
]
/ ontrialend = [
    if (list.active.indexof(trial.wordsearch.response) == -1) {
        list.active.appenditem(trial.wordsearch.response);
    } else if (list.active.indexof(trial.wordsearch.response) != -1) {
        list.active.removeitem(list.active.indexof(trial.wordsearch.response));
    };
    expressions.setboxcolors;
    expressions.checksolutions;
]
/ branch = [
    if (expressions.wordcount == 4) {
        trial.congrats;
    } else if (trial.wordsearch.response == "continue") {
        notrial;
    } else {
        trial.wordsearch;
    };
]
/ recorddata = false
</trial>

<trial congrats>
/ ontrialbegin = [
    clock.timer.pause();
]
/ stimulusframes = [1=clearscreen, bg, 1_1, 1_2, 1_3, 1_4, 1_5, 1_6, 1_7, 1_8, 1_9, 1_10, 1_11, 1_12,
    2_1, 2_2, 2_3, 2_4, 2_5, 2_6, 2_7, 2_8, 2_9, 2_10, 2_11, 2_12,
    3_1, 3_2, 3_3, 3_4, 3_5, 3_6, 3_7, 3_8, 3_9, 3_10, 3_11, 3_12,
    4_1, 4_2, 4_3, 4_4, 4_5, 4_6, 4_7, 4_8, 4_9, 4_10, 4_11, 4_12,
    5_1, 5_2, 5_3, 5_4, 5_5, 5_6, 5_7, 5_8, 5_9, 5_10, 5_11, 5_12,
    6_1, 6_2, 6_3, 6_4, 6_5, 6_6, 6_7, 6_8, 6_9, 6_10, 6_11, 6_12,
    7_1, 7_2, 7_3, 7_4, 7_5, 7_6, 7_7, 7_8, 7_9, 7_10, 7_11, 7_12,
    8_1, 8_2, 8_3, 8_4, 8_5, 8_6, 8_7, 8_8, 8_9, 8_10, 8_11, 8_12,
    9_1, 9_2, 9_3, 9_4, 9_5, 9_6, 9_7, 9_8, 9_9, 9_10, 9_11, 9_12,
    10_1, 10_2, 10_3, 10_4, 10_5, 10_6, 10_7, 10_8, 10_9, 10_10, 10_11, 10_12,
    11_1, 11_2, 11_3, 11_4, 11_5, 11_6, 11_7, 11_8, 11_9, 11_10, 11_11, 11_12,
    12_1, 12_2, 12_3, 12_4, 12_5, 12_6, 12_7, 12_8, 12_9, 12_10, 12_11, 12_12,
    congrats]
/ trialduration = 2000
</trial>

<text congrats>
/ items = ("Well done! You found all words.")
/ txcolor = white
/ txbgcolor = cadetblue
/ erase = false
</text>

<text wordsfound>
/ items = ("<%expressions.wordcount%> of 4 words found.")
/ erase = false
/ position = (85%, 50%)
/ size = (20%, 10%)
</text>

<text Continue>
/ items = ("Continue")
/ size = (10%, 5%)
/ position = (50%, 95%)
/ txbgcolor = grey
/ vjustify = center
/ erase = false
</text>

<shape bg>
/ shape = rectangle
/ color = black
/ size = (0.72px * display.canvasheight, 72%)
/ erase = false
</shape>

<item randomletters>
/ 1 = "A"
/ 2 = "B"
/ 3 = "C"
/ 4 = "D"
/ 5 = "E"
/ 6 = "F"
/ 7 = "G"
/ 8 = "H"
/ 9 = "I"
/ 10 = "J"
/ 11 = "K"
/ 12 = "L"
/ 13 = "M"
/ 14 = "N"
/ 15 = "O"
/ 16 = "P"
/ 17 = "Q"
/ 18 = "R"
/ 19 = "S"
/ 20 = "T"
/ 21 = "U"
/ 22 = "V"
/ 23 = "W"
/ 24 = "X"
/ 25 = "Y"
/ 26 = "Z"
</item>

<text 1_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_3>
/ items = ("S")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_11>
/ items = ("M")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_3>
/ items = ("E")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_11>
/ items = ("I")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_3>
/ items = ("A")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_11>
/ items = ("S")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_3>
/ items = ("R")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_11>
/ items = ("S")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_3>
/ items = ("C")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_11>
/ items = ("I")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_3>
/ items = ("H")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_11>
/ items = ("N")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_3>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_11>
/ items = ("G")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_1>
/ items = ("P")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_2>
/ items = ("E")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_3>
/ items = ("R")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_4>
/ items = ("S")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_5>
/ items = ("O")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_6>
/ items = ("N")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_7>
/ items = ("S")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_11>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_3>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_11>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_3>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_10>
/ items = ("F")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_11>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_3>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_11>
/ items = ("O")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_3>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_11>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_12>
/ items = ("R")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

Wow!!! I was just scratching my head over it. This is amazing! Thank you so much for your time and help! 


Dave
Dave
Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)
Group: Administrators
Posts: 13K, Visits: 104K
Dave - 6/15/2022
chenxyu - 6/15/2022
Dave - 6/15/2022
chenxyu - 6/15/2022
Dave - 6/15/2022
chenxyu - 6/15/2022
Thank you, Dave! Can I ask you another question? As you can see, I included an HTML file in my script. The HTML file is a word search puzzle that I plan to ask my participants to solve. The HTML is programmed in a way that those who successfully solve the puzzle will get a correct feedback message. Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

> Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

No, Inquisit doesn't have any access to whatever it is the HTML code does. If said word search puzzle isn't too complicated (I don't have your HTML file, so I have no idea how exactly the puzzle looks like), the better option would be to implement the puzzle directly in Inquisit syntax.
I'm attaching the HTML source code here. Would something like this be possibly implenmented in Inquisit?

<!doctype html>

<html>
    <head>
        <script>


            window.onload = function() {
                for (let node of document.querySelectorAll("td")) {
                    
                    node.onclick = function () {
                        if (!node.classList.contains("selected")) {
                            node.classList.add("selected")
                        } else {
                            node.classList.remove("selected")
                        }
                    }
                    if (node.textContent != "") continue;
                    let charCode = Math.round(65 + Math.random() * 25)
                    node.textContent = String.fromCharCode(charCode)
                }

                const table = document.querySelector("[data-search-area]")
                const result = document.querySelector("[data-display-result")

                let targetElement = new Map()

                const defaultAnswer = ["SEARCH","MISSING","FOR","PERSONS"]

                table.addEventListener("click", e => {
                    if(e.target.tagName.toLowerCase() === "td"){
                        const answerClassName = e.target.classList[0]
                        if(defaultAnswer.indexOf(answerClassName) !== -1){

                            targetElement.set(answerClassName,(targetElement.get(answerClassName) || new Set()).add(e.target))
                            
                            if(targetElement.get(answerClassName).size === answerClassName.length){
                                for(let element of targetElement.get(answerClassName)){
                                    element.style.backgroundColor = "tomato"
                                }
                            }
                        }

                        if(targetElement.size === defaultAnswer.length){
                            if([...targetElement.keys()].every(key => targetElement.get(key).size === key.length)){
                                result.innerHTML = "<p class='result'>Great Job!</p>"
                                console.log("YES")
                            }
                        }
                    }
                })

            }





        </script>    
        <style>
            *{
                margin: 0;
                padding: 0;
            }


            ul li {
                list-style-type: none;
            }

            td.correct {
                background-color: tomato;
            }

            table {
                border-collapse: collapse;
                background-color: lightyellow;
            }

            td {
                cursor: pointer;
                border: 1px solid black;
                width: 40px;
                height: 40px;
                text-align:center;
            }

            td.selected {
                background-color: limegreen;
            }
            h1 {
                font-family: cursive;
                color:blue;
                text-align:center;
            }
            li {
                color:red;
                font-size:18;
            }

            .result{
                color:green;
            }

            body{
                display: flex;
                margin: auto;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .content_wrapper{
                display: flex;
            }

            .words{
                margin-left: 1rem;
            }

            .clues{
                margin-top: 1rem;
            }

        </style>
    </head>
    <body>
        <h1>Word Search</h1>
        <div class="content_wrapper">
        <table data-search-area>
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">S</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">M</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">E</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">I</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">A</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">S</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">R</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">S</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">C</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">I</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">H</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">N</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">G</td>
                <td></td>
            </tr>    
            <tr>
                <td class="PERSONS">P</td>
                <td class="PERSONS">E</td>
                <td class="PERSONS">R</td>
                <td class="PERSONS">S</td>
                <td class="PERSONS">O</td>
                <td class="PERSONS">N</td>
                <td class="PERSONS">S</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">F</td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">O</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">R</td>
            </tr>        
            </table>
            <ul class="words" data-display-result>
                    <li>Word 1</li>
                    <li>Word 2</li>
                    <li>Word 3</li>
                    <li>Word 4</li>
            </ul>
        </div>
            <ul class="clues">
                <li> Hint: A task we asked you to perform in this experiment </li>
            </ul>
    </body>
</html>




Yeah, it'd be a bit of work, but it's doable.

Thank you, Dave. Would you offer some suggestions? How would you go about creating a word grid and making the letters highlightable?

Your grid will consist of 12 x 12 = 124 separate text elements, positioned as need to form the grid. Your trial's valid responses will be the 124 text elements. When a given text element is clicked, you can change its backgroud color to "highlight" it per /ontrialend logic.

Here's a basic sketch of how this would work:

<block wordsearchblock>
/ bgstim = (timer)
/ trials = [1=wordsearch]
/ timeout = 180000
</block>

<clock timer>
/ mode = timer
/ resetrate = block
/ txcolor = black
/ txbgcolor = cadetblue
/ timeout = 180000
/ position = (90%, 90%)
/ format = "mm:ss"
/ size = (5%, 5%)
</clock>

<expressions>
/ setboxcolors =
    if (list.active.indexof("1_1") != -1) {
        text.1_1.textbgcolor = yellowgreen;
    } else {
        text.1_1.textbgcolor = beige;
    };
    if (list.active.indexof("1_2") != -1) {
        text.1_2.textbgcolor = yellowgreen;
    } else {
        text.1_2.textbgcolor = beige;
    };
    if (list.active.indexof("1_3") != -1) {
        text.1_3.textbgcolor = yellowgreen;
    } else {
        text.1_3.textbgcolor = beige;
    };
    if (list.active.indexof("1_4") != -1) {
        text.1_4.textbgcolor = yellowgreen;
    } else {
        text.1_4.textbgcolor = beige;
    };
    if (list.active.indexof("1_5") != -1) {
        text.1_5.textbgcolor = yellowgreen;
    } else {
        text.1_5.textbgcolor = beige;
    };
    if (list.active.indexof("1_6") != -1) {
        text.1_6.textbgcolor = yellowgreen;
    } else {
        text.1_6.textbgcolor = beige;
    };
    if (list.active.indexof("1_7") != -1) {
        text.1_7.textbgcolor = yellowgreen;
    } else {
        text.1_7.textbgcolor = beige;
    };
    if (list.active.indexof("1_8") != -1) {
        text.1_8.textbgcolor = yellowgreen;
    } else {
        text.1_8.textbgcolor = beige;
    };
    if (list.active.indexof("1_9") != -1) {
        text.1_9.textbgcolor = yellowgreen;
    } else {
        text.1_9.textbgcolor = beige;
    };
    if (list.active.indexof("1_10") != -1) {
        text.1_10.textbgcolor = yellowgreen;
    } else {
        text.1_10.textbgcolor = beige;
    };
    if (list.active.indexof("1_11") != -1) {
        text.1_11.textbgcolor = yellowgreen;
    } else {
        text.1_11.textbgcolor = beige;
    };
    if (list.active.indexof("1_12") != -1) {
        text.1_12.textbgcolor = yellowgreen;
    } else {
        text.1_12.textbgcolor = beige;
    };

    if (list.active.indexof("2_1") != -1) {
        text.2_1.textbgcolor = yellowgreen;
    } else {
        text.2_1.textbgcolor = beige;
    };
    if (list.active.indexof("2_2") != -1) {
        text.2_2.textbgcolor = yellowgreen;
    } else {
        text.2_2.textbgcolor = beige;
    };
    if (list.active.indexof("2_3") != -1) {
        text.2_3.textbgcolor = yellowgreen;
    } else {
        text.2_3.textbgcolor = beige;
    };
    if (list.active.indexof("2_4") != -1) {
        text.2_4.textbgcolor = yellowgreen;
    } else {
        text.2_4.textbgcolor = beige;
    };
    if (list.active.indexof("2_5") != -1) {
        text.2_5.textbgcolor = yellowgreen;
    } else {
        text.2_5.textbgcolor = beige;
    };
    if (list.active.indexof("2_6") != -1) {
        text.2_6.textbgcolor = yellowgreen;
    } else {
        text.2_6.textbgcolor = beige;
    };
    if (list.active.indexof("2_7") != -1) {
        text.2_7.textbgcolor = yellowgreen;
    } else {
        text.2_7.textbgcolor = beige;
    };
    if (list.active.indexof("2_8") != -1) {
        text.2_8.textbgcolor = yellowgreen;
    } else {
        text.2_8.textbgcolor = beige;
    };
    if (list.active.indexof("2_9") != -1) {
        text.2_9.textbgcolor = yellowgreen;
    } else {
        text.2_9.textbgcolor = beige;
    };
    if (list.active.indexof("2_10") != -1) {
        text.2_10.textbgcolor = yellowgreen;
    } else {
        text.2_10.textbgcolor = beige;
    };
    if (list.active.indexof("2_11") != -1) {
        text.2_11.textbgcolor = yellowgreen;
    } else {
        text.2_11.textbgcolor = beige;
    };
    if (list.active.indexof("2_12") != -1) {
        text.2_12.textbgcolor = yellowgreen;
    } else {
        text.2_12.textbgcolor = beige;
    };

    if (list.active.indexof("3_1") != -1) {
        text.3_1.textbgcolor = yellowgreen;
    } else {
        text.3_1.textbgcolor = beige;
    };
    if (list.active.indexof("3_2") != -1) {
        text.3_2.textbgcolor = yellowgreen;
    } else {
        text.3_2.textbgcolor = beige;
    };
    if (list.active.indexof("3_3") != -1) {
        text.3_3.textbgcolor = yellowgreen;
    } else {
        text.3_3.textbgcolor = beige;
    };
    if (list.active.indexof("3_4") != -1) {
        text.3_4.textbgcolor = yellowgreen;
    } else {
        text.3_4.textbgcolor = beige;
    };
    if (list.active.indexof("3_5") != -1) {
        text.3_5.textbgcolor = yellowgreen;
    } else {
        text.3_5.textbgcolor = beige;
    };
    if (list.active.indexof("3_6") != -1) {
        text.3_6.textbgcolor = yellowgreen;
    } else {
        text.3_6.textbgcolor = beige;
    };
    if (list.active.indexof("3_7") != -1) {
        text.3_7.textbgcolor = yellowgreen;
    } else {
        text.3_7.textbgcolor = beige;
    };
    if (list.active.indexof("3_8") != -1) {
        text.3_8.textbgcolor = yellowgreen;
    } else {
        text.3_8.textbgcolor = beige;
    };
    if (list.active.indexof("3_9") != -1) {
        text.3_9.textbgcolor = yellowgreen;
    } else {
        text.3_9.textbgcolor = beige;
    };
    if (list.active.indexof("3_10") != -1) {
        text.3_10.textbgcolor = yellowgreen;
    } else {
        text.3_10.textbgcolor = beige;
    };
    if (list.active.indexof("3_11") != -1) {
        text.3_11.textbgcolor = yellowgreen;
    } else {
        text.3_11.textbgcolor = beige;
    };
    if (list.active.indexof("3_12") != -1) {
        text.3_12.textbgcolor = yellowgreen;
    } else {
        text.3_12.textbgcolor = beige;
    };

    if (list.active.indexof("4_1") != -1) {
        text.4_1.textbgcolor = yellowgreen;
    } else {
        text.4_1.textbgcolor = beige;
    };
    if (list.active.indexof("4_2") != -1) {
        text.4_2.textbgcolor = yellowgreen;
    } else {
        text.4_2.textbgcolor = beige;
    };
    if (list.active.indexof("4_3") != -1) {
        text.4_3.textbgcolor = yellowgreen;
    } else {
        text.4_3.textbgcolor = beige;
    };
    if (list.active.indexof("4_4") != -1) {
        text.4_4.textbgcolor = yellowgreen;
    } else {
        text.4_4.textbgcolor = beige;
    };
    if (list.active.indexof("4_5") != -1) {
        text.4_5.textbgcolor = yellowgreen;
    } else {
        text.4_5.textbgcolor = beige;
    };
    if (list.active.indexof("4_6") != -1) {
        text.4_6.textbgcolor = yellowgreen;
    } else {
        text.4_6.textbgcolor = beige;
    };
    if (list.active.indexof("4_7") != -1) {
        text.4_7.textbgcolor = yellowgreen;
    } else {
        text.4_7.textbgcolor = beige;
    };
    if (list.active.indexof("4_8") != -1) {
        text.4_8.textbgcolor = yellowgreen;
    } else {
        text.4_8.textbgcolor = beige;
    };
    if (list.active.indexof("4_9") != -1) {
        text.4_9.textbgcolor = yellowgreen;
    } else {
        text.4_9.textbgcolor = beige;
    };
    if (list.active.indexof("4_10") != -1) {
        text.4_10.textbgcolor = yellowgreen;
    } else {
        text.4_10.textbgcolor = beige;
    };
    if (list.active.indexof("4_11") != -1) {
        text.4_11.textbgcolor = yellowgreen;
    } else {
        text.4_11.textbgcolor = beige;
    };
    if (list.active.indexof("4_12") != -1) {
        text.4_12.textbgcolor = yellowgreen;
    } else {
        text.4_12.textbgcolor = beige;
    };

    if (list.active.indexof("5_1") != -1) {
        text.5_1.textbgcolor = yellowgreen;
    } else {
        text.5_1.textbgcolor = beige;
    };
    if (list.active.indexof("5_2") != -1) {
        text.5_2.textbgcolor = yellowgreen;
    } else {
        text.5_2.textbgcolor = beige;
    };
    if (list.active.indexof("5_3") != -1) {
        text.5_3.textbgcolor = yellowgreen;
    } else {
        text.5_3.textbgcolor = beige;
    };
    if (list.active.indexof("5_4") != -1) {
        text.5_4.textbgcolor = yellowgreen;
    } else {
        text.5_4.textbgcolor = beige;
    };
    if (list.active.indexof("5_5") != -1) {
        text.5_5.textbgcolor = yellowgreen;
    } else {
        text.5_5.textbgcolor = beige;
    };
    if (list.active.indexof("5_6") != -1) {
        text.5_6.textbgcolor = yellowgreen;
    } else {
        text.5_6.textbgcolor = beige;
    };
    if (list.active.indexof("5_7") != -1) {
        text.5_7.textbgcolor = yellowgreen;
    } else {
        text.5_7.textbgcolor = beige;
    };
    if (list.active.indexof("5_8") != -1) {
        text.5_8.textbgcolor = yellowgreen;
    } else {
        text.5_8.textbgcolor = beige;
    };
    if (list.active.indexof("5_9") != -1) {
        text.5_9.textbgcolor = yellowgreen;
    } else {
        text.5_9.textbgcolor = beige;
    };
    if (list.active.indexof("5_10") != -1) {
        text.5_10.textbgcolor = yellowgreen;
    } else {
        text.5_10.textbgcolor = beige;
    };
    if (list.active.indexof("5_11") != -1) {
        text.5_11.textbgcolor = yellowgreen;
    } else {
        text.5_11.textbgcolor = beige;
    };
    if (list.active.indexof("5_12") != -1) {
        text.5_12.textbgcolor = yellowgreen;
    } else {
        text.5_12.textbgcolor = beige;
    };

    if (list.active.indexof("6_1") != -1) {
        text.6_1.textbgcolor = yellowgreen;
    } else {
        text.6_1.textbgcolor = beige;
    };
    if (list.active.indexof("6_2") != -1) {
        text.6_2.textbgcolor = yellowgreen;
    } else {
        text.6_2.textbgcolor = beige;
    };
    if (list.active.indexof("6_3") != -1) {
        text.6_3.textbgcolor = yellowgreen;
    } else {
        text.6_3.textbgcolor = beige;
    };
    if (list.active.indexof("6_4") != -1) {
        text.6_4.textbgcolor = yellowgreen;
    } else {
        text.6_4.textbgcolor = beige;
    };
    if (list.active.indexof("6_5") != -1) {
        text.6_5.textbgcolor = yellowgreen;
    } else {
        text.6_5.textbgcolor = beige;
    };
    if (list.active.indexof("6_6") != -1) {
        text.6_6.textbgcolor = yellowgreen;
    } else {
        text.6_6.textbgcolor = beige;
    };
    if (list.active.indexof("6_7") != -1) {
        text.6_7.textbgcolor = yellowgreen;
    } else {
        text.6_7.textbgcolor = beige;
    };
    if (list.active.indexof("6_8") != -1) {
        text.6_8.textbgcolor = yellowgreen;
    } else {
        text.6_8.textbgcolor = beige;
    };
    if (list.active.indexof("6_9") != -1) {
        text.6_9.textbgcolor = yellowgreen;
    } else {
        text.6_9.textbgcolor = beige;
    };
    if (list.active.indexof("6_10") != -1) {
        text.6_10.textbgcolor = yellowgreen;
    } else {
        text.6_10.textbgcolor = beige;
    };
    if (list.active.indexof("6_11") != -1) {
        text.6_11.textbgcolor = yellowgreen;
    } else {
        text.6_11.textbgcolor = beige;
    };
    if (list.active.indexof("6_12") != -1) {
        text.6_12.textbgcolor = yellowgreen;
    } else {
        text.6_12.textbgcolor = beige;
    };

    if (list.active.indexof("7_1") != -1) {
        text.7_1.textbgcolor = yellowgreen;
    } else {
        text.7_1.textbgcolor = beige;
    };
    if (list.active.indexof("7_2") != -1) {
        text.7_2.textbgcolor = yellowgreen;
    } else {
        text.7_2.textbgcolor = beige;
    };
    if (list.active.indexof("7_3") != -1) {
        text.7_3.textbgcolor = yellowgreen;
    } else {
        text.7_3.textbgcolor = beige;
    };
    if (list.active.indexof("7_4") != -1) {
        text.7_4.textbgcolor = yellowgreen;
    } else {
        text.7_4.textbgcolor = beige;
    };
    if (list.active.indexof("7_5") != -1) {
        text.7_5.textbgcolor = yellowgreen;
    } else {
        text.7_5.textbgcolor = beige;
    };
    if (list.active.indexof("7_6") != -1) {
        text.7_6.textbgcolor = yellowgreen;
    } else {
        text.7_6.textbgcolor = beige;
    };
    if (list.active.indexof("7_7") != -1) {
        text.7_7.textbgcolor = yellowgreen;
    } else {
        text.7_7.textbgcolor = beige;
    };
    if (list.active.indexof("7_8") != -1) {
        text.7_8.textbgcolor = yellowgreen;
    } else {
        text.7_8.textbgcolor = beige;
    };
    if (list.active.indexof("7_9") != -1) {
        text.7_9.textbgcolor = yellowgreen;
    } else {
        text.7_9.textbgcolor = beige;
    };
    if (list.active.indexof("7_10") != -1) {
        text.7_10.textbgcolor = yellowgreen;
    } else {
        text.7_10.textbgcolor = beige;
    };
    if (list.active.indexof("7_11") != -1) {
        text.7_11.textbgcolor = yellowgreen;
    } else {
        text.7_11.textbgcolor = beige;
    };
    if (list.active.indexof("7_12") != -1) {
        text.7_12.textbgcolor = yellowgreen;
    } else {
        text.7_12.textbgcolor = beige;
    };

    if (list.active.indexof("8_1") != -1) {
        text.8_1.textbgcolor = yellowgreen;
    } else {
        text.8_1.textbgcolor = beige;
    };
    if (list.active.indexof("8_2") != -1) {
        text.8_2.textbgcolor = yellowgreen;
    } else {
        text.8_2.textbgcolor = beige;
    };
    if (list.active.indexof("8_3") != -1) {
        text.8_3.textbgcolor = yellowgreen;
    } else {
        text.8_3.textbgcolor = beige;
    };
    if (list.active.indexof("8_4") != -1) {
        text.8_4.textbgcolor = yellowgreen;
    } else {
        text.8_4.textbgcolor = beige;
    };
    if (list.active.indexof("8_5") != -1) {
        text.8_5.textbgcolor = yellowgreen;
    } else {
        text.8_5.textbgcolor = beige;
    };
    if (list.active.indexof("8_6") != -1) {
        text.8_6.textbgcolor = yellowgreen;
    } else {
        text.8_6.textbgcolor = beige;
    };
    if (list.active.indexof("8_7") != -1) {
        text.8_7.textbgcolor = yellowgreen;
    } else {
        text.8_7.textbgcolor = beige;
    };
    if (list.active.indexof("8_8") != -1) {
        text.8_8.textbgcolor = yellowgreen;
    } else {
        text.8_8.textbgcolor = beige;
    };
    if (list.active.indexof("8_9") != -1) {
        text.8_9.textbgcolor = yellowgreen;
    } else {
        text.8_9.textbgcolor = beige;
    };
    if (list.active.indexof("8_10") != -1) {
        text.8_10.textbgcolor = yellowgreen;
    } else {
        text.8_10.textbgcolor = beige;
    };
    if (list.active.indexof("8_11") != -1) {
        text.8_11.textbgcolor = yellowgreen;
    } else {
        text.8_11.textbgcolor = beige;
    };
    if (list.active.indexof("8_12") != -1) {
        text.8_12.textbgcolor = yellowgreen;
    } else {
        text.8_12.textbgcolor = beige;
    };

    if (list.active.indexof("9_1") != -1) {
        text.9_1.textbgcolor = yellowgreen;
    } else {
        text.9_1.textbgcolor = beige;
    };
    if (list.active.indexof("9_2") != -1) {
        text.9_2.textbgcolor = yellowgreen;
    } else {
        text.9_2.textbgcolor = beige;
    };
    if (list.active.indexof("9_3") != -1) {
        text.9_3.textbgcolor = yellowgreen;
    } else {
        text.9_3.textbgcolor = beige;
    };
    if (list.active.indexof("9_4") != -1) {
        text.9_4.textbgcolor = yellowgreen;
    } else {
        text.9_4.textbgcolor = beige;
    };
    if (list.active.indexof("9_5") != -1) {
        text.9_5.textbgcolor = yellowgreen;
    } else {
        text.9_5.textbgcolor = beige;
    };
    if (list.active.indexof("9_6") != -1) {
        text.9_6.textbgcolor = yellowgreen;
    } else {
        text.9_6.textbgcolor = beige;
    };
    if (list.active.indexof("9_7") != -1) {
        text.9_7.textbgcolor = yellowgreen;
    } else {
        text.9_7.textbgcolor = beige;
    };
    if (list.active.indexof("9_8") != -1) {
        text.9_8.textbgcolor = yellowgreen;
    } else {
        text.9_8.textbgcolor = beige;
    };
    if (list.active.indexof("9_9") != -1) {
        text.9_9.textbgcolor = yellowgreen;
    } else {
        text.9_9.textbgcolor = beige;
    };
    if (list.active.indexof("9_10") != -1) {
        text.9_10.textbgcolor = yellowgreen;
    } else {
        text.9_10.textbgcolor = beige;
    };
    if (list.active.indexof("9_11") != -1) {
        text.9_11.textbgcolor = yellowgreen;
    } else {
        text.9_11.textbgcolor = beige;
    };
    if (list.active.indexof("9_12") != -1) {
        text.9_12.textbgcolor = yellowgreen;
    } else {
        text.9_12.textbgcolor = beige;
    };

    if (list.active.indexof("10_1") != -1) {
        text.10_1.textbgcolor = yellowgreen;
    } else {
        text.10_1.textbgcolor = beige;
    };
    if (list.active.indexof("10_2") != -1) {
        text.10_2.textbgcolor = yellowgreen;
    } else {
        text.10_2.textbgcolor = beige;
    };
    if (list.active.indexof("10_3") != -1) {
        text.10_3.textbgcolor = yellowgreen;
    } else {
        text.10_3.textbgcolor = beige;
    };
    if (list.active.indexof("10_4") != -1) {
        text.10_4.textbgcolor = yellowgreen;
    } else {
        text.10_4.textbgcolor = beige;
    };
    if (list.active.indexof("10_5") != -1) {
        text.10_5.textbgcolor = yellowgreen;
    } else {
        text.10_5.textbgcolor = beige;
    };
    if (list.active.indexof("10_6") != -1) {
        text.10_6.textbgcolor = yellowgreen;
    } else {
        text.10_6.textbgcolor = beige;
    };
    if (list.active.indexof("10_7") != -1) {
        text.10_7.textbgcolor = yellowgreen;
    } else {
        text.10_7.textbgcolor = beige;
    };
    if (list.active.indexof("10_8") != -1) {
        text.10_8.textbgcolor = yellowgreen;
    } else {
        text.10_8.textbgcolor = beige;
    };
    if (list.active.indexof("10_9") != -1) {
        text.10_9.textbgcolor = yellowgreen;
    } else {
        text.10_9.textbgcolor = beige;
    };
    if (list.active.indexof("10_10") != -1) {
        text.10_10.textbgcolor = yellowgreen;
    } else {
        text.10_10.textbgcolor = beige;
    };
    if (list.active.indexof("10_11") != -1) {
        text.10_11.textbgcolor = yellowgreen;
    } else {
        text.10_11.textbgcolor = beige;
    };
    if (list.active.indexof("10_12") != -1) {
        text.10_12.textbgcolor = yellowgreen;
    } else {
        text.10_12.textbgcolor = beige;
    };

    if (list.active.indexof("11_1") != -1) {
        text.11_1.textbgcolor = yellowgreen;
    } else {
        text.11_1.textbgcolor = beige;
    };
    if (list.active.indexof("11_2") != -1) {
        text.11_2.textbgcolor = yellowgreen;
    } else {
        text.11_2.textbgcolor = beige;
    };
    if (list.active.indexof("11_3") != -1) {
        text.11_3.textbgcolor = yellowgreen;
    } else {
        text.11_3.textbgcolor = beige;
    };
    if (list.active.indexof("11_4") != -1) {
        text.11_4.textbgcolor = yellowgreen;
    } else {
        text.11_4.textbgcolor = beige;
    };
    if (list.active.indexof("11_5") != -1) {
        text.11_5.textbgcolor = yellowgreen;
    } else {
        text.11_5.textbgcolor = beige;
    };
    if (list.active.indexof("11_6") != -1) {
        text.11_6.textbgcolor = yellowgreen;
    } else {
        text.11_6.textbgcolor = beige;
    };
    if (list.active.indexof("11_7") != -1) {
        text.11_7.textbgcolor = yellowgreen;
    } else {
        text.11_7.textbgcolor = beige;
    };
    if (list.active.indexof("11_8") != -1) {
        text.11_8.textbgcolor = yellowgreen;
    } else {
        text.11_8.textbgcolor = beige;
    };
    if (list.active.indexof("11_9") != -1) {
        text.11_9.textbgcolor = yellowgreen;
    } else {
        text.11_9.textbgcolor = beige;
    };
    if (list.active.indexof("11_10") != -1) {
        text.11_10.textbgcolor = yellowgreen;
    } else {
        text.11_10.textbgcolor = beige;
    };
    if (list.active.indexof("11_11") != -1) {
        text.11_11.textbgcolor = yellowgreen;
    } else {
        text.11_11.textbgcolor = beige;
    };
    if (list.active.indexof("11_12") != -1) {
        text.11_12.textbgcolor = yellowgreen;
    } else {
        text.11_12.textbgcolor = beige;
    };

    if (list.active.indexof("12_1") != -1) {
        text.12_1.textbgcolor = yellowgreen;
    } else {
        text.12_1.textbgcolor = beige;
    };
    if (list.active.indexof("12_2") != -1) {
        text.12_2.textbgcolor = yellowgreen;
    } else {
        text.12_2.textbgcolor = beige;
    };
    if (list.active.indexof("12_3") != -1) {
        text.12_3.textbgcolor = yellowgreen;
    } else {
        text.12_3.textbgcolor = beige;
    };
    if (list.active.indexof("12_4") != -1) {
        text.12_4.textbgcolor = yellowgreen;
    } else {
        text.12_4.textbgcolor = beige;
    };
    if (list.active.indexof("12_5") != -1) {
        text.12_5.textbgcolor = yellowgreen;
    } else {
        text.12_5.textbgcolor = beige;
    };
    if (list.active.indexof("12_6") != -1) {
        text.12_6.textbgcolor = yellowgreen;
    } else {
        text.12_6.textbgcolor = beige;
    };
    if (list.active.indexof("12_7") != -1) {
        text.12_7.textbgcolor = yellowgreen;
    } else {
        text.12_7.textbgcolor = beige;
    };
    if (list.active.indexof("12_8") != -1) {
        text.12_8.textbgcolor = yellowgreen;
    } else {
        text.12_8.textbgcolor = beige;
    };
    if (list.active.indexof("12_9") != -1) {
        text.12_9.textbgcolor = yellowgreen;
    } else {
        text.12_9.textbgcolor = beige;
    };
    if (list.active.indexof("12_10") != -1) {
        text.12_10.textbgcolor = yellowgreen;
    } else {
        text.12_10.textbgcolor = beige;
    };
    if (list.active.indexof("12_11") != -1) {
        text.12_11.textbgcolor = yellowgreen;
    } else {
        text.12_11.textbgcolor = beige;
    };
    if (list.active.indexof("12_12") != -1) {
        text.12_12.textbgcolor = yellowgreen;
    } else {
        text.12_12.textbgcolor = beige;
    };
    
/ checksolutions =
    if ((list.active.indexof("1_3") != -1)
    && (list.active.indexof("2_3") != -1)
    && (list.active.indexof("3_3") != -1)
    && (list.active.indexof("4_3") != -1)
    && (list.active.indexof("5_3") != -1)
    && (list.active.indexof("6_3") != -1)) {
        values.word1 = true;
        text.1_3.textbgcolor = tomato;
        text.2_3.textbgcolor = tomato;
        text.3_3.textbgcolor = tomato;
        text.4_3.textbgcolor = tomato;
        text.5_3.textbgcolor = tomato;
        text.6_3.textbgcolor = tomato;
        list.blocked.appenditem("1_3");
        list.blocked.appenditem("2_3");
        list.blocked.appenditem("3_3");
        list.blocked.appenditem("4_3");
        list.blocked.appenditem("5_3");
        list.blocked.appenditem("6_3");
    };
    if ((list.active.indexof("10_10") != -1)
    && (list.active.indexof("11_11") != -1)
    && (list.active.indexof("12_12") != -1)) {
        values.word2 = true;
        text.10_10.textbgcolor = tomato;
        text.11_11.textbgcolor = tomato;
        text.12_12.textbgcolor = tomato;
        list.blocked.appenditem("10_10");
        list.blocked.appenditem("11_11");
        list.blocked.appenditem("12_12");
    };
    if ((list.active.indexof("1_11") != -1)
    && (list.active.indexof("2_11") != -1)
    && (list.active.indexof("3_11") != -1)
    && (list.active.indexof("4_11") != -1)
    && (list.active.indexof("5_11") != -1)
    && (list.active.indexof("6_11") != -1)
    && (list.active.indexof("7_11") != -1)) {
        values.word3 = true;
        text.1_11.textbgcolor = tomato;
        text.2_11.textbgcolor = tomato;
        text.3_11.textbgcolor = tomato;
        text.4_11.textbgcolor = tomato;
        text.5_11.textbgcolor = tomato;
        text.6_11.textbgcolor = tomato;
        text.7_11.textbgcolor = tomato;
        list.blocked.appenditem("1_11");
        list.blocked.appenditem("2_11");
        list.blocked.appenditem("3_11");
        list.blocked.appenditem("4_11");
        list.blocked.appenditem("5_11");
        list.blocked.appenditem("6_11");
        list.blocked.appenditem("7_11");
    };
    if ((list.active.indexof("8_1") != -1)
    && (list.active.indexof("8_2") != -1)
    && (list.active.indexof("8_3") != -1)
    && (list.active.indexof("8_4") != -1)
    && (list.active.indexof("8_5") != -1)
    && (list.active.indexof("8_6") != -1)
    && (list.active.indexof("8_7") != -1)) {
        values.word4 = true;
        text.8_1.textbgcolor = tomato;
        text.8_2.textbgcolor = tomato;
        text.8_3.textbgcolor = tomato;
        text.8_4.textbgcolor = tomato;
        text.8_5.textbgcolor = tomato;
        text.8_6.textbgcolor = tomato;
        text.8_7.textbgcolor = tomato;
        list.blocked.appenditem("8_1");
        list.blocked.appenditem("8_2");
        list.blocked.appenditem("8_3");
        list.blocked.appenditem("8_4");
        list.blocked.appenditem("8_5");
        list.blocked.appenditem("8_6");
        list.blocked.appenditem("8_7");
    };
    
/ wordcount = (values.word1 + values.word2 + values.word3 + values.word4)
</expressions>

<values>
/ word1 = false
/ word2 = false
/ word3 = false
/ word4 = false
</values>


// SEARCH
<list word1>
/ items = ("1_3", "2_3", "3_3", "4_3", "5_3", "6_3")
</list>

// FOR
<list word2>
/ items = ("10_10", "11_11", "12_12")
</list>

// MISSING
<list word3>
/ items = ("1_11", "2_11", "3_11", "4_11", "5_11", "6_11", "7_11")
</list>

// PERSONS
<list word4>
/ items = ("8_1", "8_2", "8_3", "8_4", "8_5", "8_6", "8_7")
</list>

<list active>
</list>

<list blocked>
/ items = ("continue")
</list>

<trial wordsearch>
/ stimulusframes = [1=bg, 1_1, 1_2, 1_3, 1_4, 1_5, 1_6, 1_7, 1_8, 1_9, 1_10, 1_11, 1_12,
    2_1, 2_2, 2_3, 2_4, 2_5, 2_6, 2_7, 2_8, 2_9, 2_10, 2_11, 2_12,
    3_1, 3_2, 3_3, 3_4, 3_5, 3_6, 3_7, 3_8, 3_9, 3_10, 3_11, 3_12,
    4_1, 4_2, 4_3, 4_4, 4_5, 4_6, 4_7, 4_8, 4_9, 4_10, 4_11, 4_12,
    5_1, 5_2, 5_3, 5_4, 5_5, 5_6, 5_7, 5_8, 5_9, 5_10, 5_11, 5_12,
    6_1, 6_2, 6_3, 6_4, 6_5, 6_6, 6_7, 6_8, 6_9, 6_10, 6_11, 6_12,
    7_1, 7_2, 7_3, 7_4, 7_5, 7_6, 7_7, 7_8, 7_9, 7_10, 7_11, 7_12,
    8_1, 8_2, 8_3, 8_4, 8_5, 8_6, 8_7, 8_8, 8_9, 8_10, 8_11, 8_12,
    9_1, 9_2, 9_3, 9_4, 9_5, 9_6, 9_7, 9_8, 9_9, 9_10, 9_11, 9_12,
    10_1, 10_2, 10_3, 10_4, 10_5, 10_6, 10_7, 10_8, 10_9, 10_10, 10_11, 10_12,
    11_1, 11_2, 11_3, 11_4, 11_5, 11_6, 11_7, 11_8, 11_9, 11_10, 11_11, 11_12,
    12_1, 12_2, 12_3, 12_4, 12_5, 12_6, 12_7, 12_8, 12_9, 12_10, 12_11, 12_12,
    wordsfound, continue]
/ inputdevice = mouse
/ validresponse = (1_1, 1_2, 1_3, 1_4, 1_5, 1_6, 1_7, 1_8, 1_9, 1_10, 1_11, 1_12,
    2_1, 2_2, 2_3, 2_4, 2_5, 2_6, 2_7, 2_8, 2_9, 2_10, 2_11, 2_12,
    3_1, 3_2, 3_3, 3_4, 3_5, 3_6, 3_7, 3_8, 3_9, 3_10, 3_11, 3_12,
    4_1, 4_2, 4_3, 4_4, 4_5, 4_6, 4_7, 4_8, 4_9, 4_10, 4_11, 4_12,
    5_1, 5_2, 5_3, 5_4, 5_5, 5_6, 5_7, 5_8, 5_9, 5_10, 5_11, 5_12,
    6_1, 6_2, 6_3, 6_4, 6_5, 6_6, 6_7, 6_8, 6_9, 6_10, 6_11, 6_12,
    7_1, 7_2, 7_3, 7_4, 7_5, 7_6, 7_7, 7_8, 7_9, 7_10, 7_11, 7_12,
    8_1, 8_2, 8_3, 8_4, 8_5, 8_6, 8_7, 8_8, 8_9, 8_10, 8_11, 8_12,
    9_1, 9_2, 9_3, 9_4, 9_5, 9_6, 9_7, 9_8, 9_9, 9_10, 9_11, 9_12,
    10_1, 10_2, 10_3, 10_4, 10_5, 10_6, 10_7, 10_8, 10_9, 10_10, 10_11, 10_12,
    11_1, 11_2, 11_3, 11_4, 11_5, 11_6, 11_7, 11_8, 11_9, 11_10, 11_11, 11_12,
    12_1, 12_2, 12_3, 12_4, 12_5, 12_6, 12_7, 12_8, 12_9, 12_10, 12_11, 12_12, continue)
    
/ isvalidresponse = [
    list.blocked.indexof(trial.wordsearch.response) == -1 || (block.wordsearchblock.elapsedtime > 30000 && trial.wordsearch.response == "continue");
]
/ ontrialend = [
    if (list.active.indexof(trial.wordsearch.response) == -1) {
        list.active.appenditem(trial.wordsearch.response);
    } else if (list.active.indexof(trial.wordsearch.response) != -1) {
        list.active.removeitem(list.active.indexof(trial.wordsearch.response));
    };
    expressions.setboxcolors;
    expressions.checksolutions;
]
/ branch = [
    if (expressions.wordcount == 4) {
        trial.congrats;
    } else if (trial.wordsearch.response == "continue") {
        notrial;
    } else {
        trial.wordsearch;
    };
]
/ recorddata = false
</trial>

<trial congrats>
/ ontrialbegin = [
    clock.timer.pause();
]
/ stimulusframes = [1=clearscreen, bg, 1_1, 1_2, 1_3, 1_4, 1_5, 1_6, 1_7, 1_8, 1_9, 1_10, 1_11, 1_12,
    2_1, 2_2, 2_3, 2_4, 2_5, 2_6, 2_7, 2_8, 2_9, 2_10, 2_11, 2_12,
    3_1, 3_2, 3_3, 3_4, 3_5, 3_6, 3_7, 3_8, 3_9, 3_10, 3_11, 3_12,
    4_1, 4_2, 4_3, 4_4, 4_5, 4_6, 4_7, 4_8, 4_9, 4_10, 4_11, 4_12,
    5_1, 5_2, 5_3, 5_4, 5_5, 5_6, 5_7, 5_8, 5_9, 5_10, 5_11, 5_12,
    6_1, 6_2, 6_3, 6_4, 6_5, 6_6, 6_7, 6_8, 6_9, 6_10, 6_11, 6_12,
    7_1, 7_2, 7_3, 7_4, 7_5, 7_6, 7_7, 7_8, 7_9, 7_10, 7_11, 7_12,
    8_1, 8_2, 8_3, 8_4, 8_5, 8_6, 8_7, 8_8, 8_9, 8_10, 8_11, 8_12,
    9_1, 9_2, 9_3, 9_4, 9_5, 9_6, 9_7, 9_8, 9_9, 9_10, 9_11, 9_12,
    10_1, 10_2, 10_3, 10_4, 10_5, 10_6, 10_7, 10_8, 10_9, 10_10, 10_11, 10_12,
    11_1, 11_2, 11_3, 11_4, 11_5, 11_6, 11_7, 11_8, 11_9, 11_10, 11_11, 11_12,
    12_1, 12_2, 12_3, 12_4, 12_5, 12_6, 12_7, 12_8, 12_9, 12_10, 12_11, 12_12,
    congrats]
/ trialduration = 2000
</trial>

<text congrats>
/ items = ("Well done! You found all words.")
/ txcolor = white
/ txbgcolor = cadetblue
/ erase = false
</text>

<text wordsfound>
/ items = ("<%expressions.wordcount%> of 4 words found.")
/ erase = false
/ position = (85%, 50%)
/ size = (20%, 10%)
</text>

<text Continue>
/ items = ("Continue")
/ size = (10%, 5%)
/ position = (50%, 95%)
/ txbgcolor = grey
/ vjustify = center
/ erase = false
</text>

<shape bg>
/ shape = rectangle
/ color = black
/ size = (0.72px * display.canvasheight, 72%)
/ erase = false
</shape>

<item randomletters>
/ 1 = "A"
/ 2 = "B"
/ 3 = "C"
/ 4 = "D"
/ 5 = "E"
/ 6 = "F"
/ 7 = "G"
/ 8 = "H"
/ 9 = "I"
/ 10 = "J"
/ 11 = "K"
/ 12 = "L"
/ 13 = "M"
/ 14 = "N"
/ 15 = "O"
/ 16 = "P"
/ 17 = "Q"
/ 18 = "R"
/ 19 = "S"
/ 20 = "T"
/ 21 = "U"
/ 22 = "V"
/ 23 = "W"
/ 24 = "X"
/ 25 = "Y"
/ 26 = "Z"
</item>

<text 1_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_3>
/ items = ("S")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_11>
/ items = ("M")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 1_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_3>
/ items = ("E")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_11>
/ items = ("I")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 2_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 1*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_3>
/ items = ("A")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_11>
/ items = ("S")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 3_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 2*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_3>
/ items = ("R")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_11>
/ items = ("S")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 4_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 3*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_3>
/ items = ("C")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_11>
/ items = ("I")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 5_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 4*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_3>
/ items = ("H")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_11>
/ items = ("N")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 6_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 5*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_3>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_11>
/ items = ("G")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 7_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 6*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_1>
/ items = ("P")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_2>
/ items = ("E")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_3>
/ items = ("R")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_4>
/ items = ("S")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_5>
/ items = ("O")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_6>
/ items = ("N")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_7>
/ items = ("S")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_11>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 8_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 7*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_3>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_11>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 9_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 8*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_3>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_10>
/ items = ("F")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_11>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 10_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 9*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_3>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_11>
/ items = ("O")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 11_12>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 10*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_1>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_2>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 1*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_3>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 2*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_4>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 3*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_5>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 4*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_6>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 5*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_7>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 6*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_8>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 7*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_9>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 8*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_10>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 9*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_11>
/ items = randomletters
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left + 10*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

<text 12_12>
/ items = ("R")
/ vjustify = center
/ txbgcolor = beige
/ size = (0.06 * display.canvasheight, 6%)
/ erase = false
/ position = (shape.bg.left +11*text.1_1.width, shape.bg.top + 11*text.1_1.width)
/ halign = left
/ valign = top
/ selectionrate = block
</text>

Dave
Dave
Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)
Group: Administrators
Posts: 13K, Visits: 104K
chenxyu - 6/15/2022
Dave - 6/15/2022
chenxyu - 6/15/2022
Dave - 6/15/2022
chenxyu - 6/15/2022
Thank you, Dave! Can I ask you another question? As you can see, I included an HTML file in my script. The HTML file is a word search puzzle that I plan to ask my participants to solve. The HTML is programmed in a way that those who successfully solve the puzzle will get a correct feedback message. Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

> Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

No, Inquisit doesn't have any access to whatever it is the HTML code does. If said word search puzzle isn't too complicated (I don't have your HTML file, so I have no idea how exactly the puzzle looks like), the better option would be to implement the puzzle directly in Inquisit syntax.
I'm attaching the HTML source code here. Would something like this be possibly implenmented in Inquisit?

<!doctype html>

<html>
    <head>
        <script>


            window.onload = function() {
                for (let node of document.querySelectorAll("td")) {
                    
                    node.onclick = function () {
                        if (!node.classList.contains("selected")) {
                            node.classList.add("selected")
                        } else {
                            node.classList.remove("selected")
                        }
                    }
                    if (node.textContent != "") continue;
                    let charCode = Math.round(65 + Math.random() * 25)
                    node.textContent = String.fromCharCode(charCode)
                }

                const table = document.querySelector("[data-search-area]")
                const result = document.querySelector("[data-display-result")

                let targetElement = new Map()

                const defaultAnswer = ["SEARCH","MISSING","FOR","PERSONS"]

                table.addEventListener("click", e => {
                    if(e.target.tagName.toLowerCase() === "td"){
                        const answerClassName = e.target.classList[0]
                        if(defaultAnswer.indexOf(answerClassName) !== -1){

                            targetElement.set(answerClassName,(targetElement.get(answerClassName) || new Set()).add(e.target))
                            
                            if(targetElement.get(answerClassName).size === answerClassName.length){
                                for(let element of targetElement.get(answerClassName)){
                                    element.style.backgroundColor = "tomato"
                                }
                            }
                        }

                        if(targetElement.size === defaultAnswer.length){
                            if([...targetElement.keys()].every(key => targetElement.get(key).size === key.length)){
                                result.innerHTML = "<p class='result'>Great Job!</p>"
                                console.log("YES")
                            }
                        }
                    }
                })

            }





        </script>    
        <style>
            *{
                margin: 0;
                padding: 0;
            }


            ul li {
                list-style-type: none;
            }

            td.correct {
                background-color: tomato;
            }

            table {
                border-collapse: collapse;
                background-color: lightyellow;
            }

            td {
                cursor: pointer;
                border: 1px solid black;
                width: 40px;
                height: 40px;
                text-align:center;
            }

            td.selected {
                background-color: limegreen;
            }
            h1 {
                font-family: cursive;
                color:blue;
                text-align:center;
            }
            li {
                color:red;
                font-size:18;
            }

            .result{
                color:green;
            }

            body{
                display: flex;
                margin: auto;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .content_wrapper{
                display: flex;
            }

            .words{
                margin-left: 1rem;
            }

            .clues{
                margin-top: 1rem;
            }

        </style>
    </head>
    <body>
        <h1>Word Search</h1>
        <div class="content_wrapper">
        <table data-search-area>
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">S</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">M</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">E</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">I</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">A</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">S</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">R</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">S</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">C</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">I</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">H</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">N</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">G</td>
                <td></td>
            </tr>    
            <tr>
                <td class="PERSONS">P</td>
                <td class="PERSONS">E</td>
                <td class="PERSONS">R</td>
                <td class="PERSONS">S</td>
                <td class="PERSONS">O</td>
                <td class="PERSONS">N</td>
                <td class="PERSONS">S</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">F</td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">O</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">R</td>
            </tr>        
            </table>
            <ul class="words" data-display-result>
                    <li>Word 1</li>
                    <li>Word 2</li>
                    <li>Word 3</li>
                    <li>Word 4</li>
            </ul>
        </div>
            <ul class="clues">
                <li> Hint: A task we asked you to perform in this experiment </li>
            </ul>
    </body>
</html>




Yeah, it'd be a bit of work, but it's doable.

Thank you, Dave. Would you offer some suggestions? How would you go about creating a word grid and making the letters highlightable?

Your grid will consist of 12 x 12 = 144 separate text elements, positioned as need to form the grid. Your trial's valid responses will be the 124 text elements. When a given text element is clicked, you can change its backgroud color to "highlight" it per /ontrialend logic.
Edited 2 Years Ago by Dave
chenxyu
chenxyu
Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)
Group: Forum Members
Posts: 18, Visits: 252
Dave - 6/15/2022
chenxyu - 6/15/2022
Dave - 6/15/2022
chenxyu - 6/15/2022
Thank you, Dave! Can I ask you another question? As you can see, I included an HTML file in my script. The HTML file is a word search puzzle that I plan to ask my participants to solve. The HTML is programmed in a way that those who successfully solve the puzzle will get a correct feedback message. Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

> Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

No, Inquisit doesn't have any access to whatever it is the HTML code does. If said word search puzzle isn't too complicated (I don't have your HTML file, so I have no idea how exactly the puzzle looks like), the better option would be to implement the puzzle directly in Inquisit syntax.
I'm attaching the HTML source code here. Would something like this be possibly implenmented in Inquisit?

<!doctype html>

<html>
    <head>
        <script>


            window.onload = function() {
                for (let node of document.querySelectorAll("td")) {
                    
                    node.onclick = function () {
                        if (!node.classList.contains("selected")) {
                            node.classList.add("selected")
                        } else {
                            node.classList.remove("selected")
                        }
                    }
                    if (node.textContent != "") continue;
                    let charCode = Math.round(65 + Math.random() * 25)
                    node.textContent = String.fromCharCode(charCode)
                }

                const table = document.querySelector("[data-search-area]")
                const result = document.querySelector("[data-display-result")

                let targetElement = new Map()

                const defaultAnswer = ["SEARCH","MISSING","FOR","PERSONS"]

                table.addEventListener("click", e => {
                    if(e.target.tagName.toLowerCase() === "td"){
                        const answerClassName = e.target.classList[0]
                        if(defaultAnswer.indexOf(answerClassName) !== -1){

                            targetElement.set(answerClassName,(targetElement.get(answerClassName) || new Set()).add(e.target))
                            
                            if(targetElement.get(answerClassName).size === answerClassName.length){
                                for(let element of targetElement.get(answerClassName)){
                                    element.style.backgroundColor = "tomato"
                                }
                            }
                        }

                        if(targetElement.size === defaultAnswer.length){
                            if([...targetElement.keys()].every(key => targetElement.get(key).size === key.length)){
                                result.innerHTML = "<p class='result'>Great Job!</p>"
                                console.log("YES")
                            }
                        }
                    }
                })

            }





        </script>    
        <style>
            *{
                margin: 0;
                padding: 0;
            }


            ul li {
                list-style-type: none;
            }

            td.correct {
                background-color: tomato;
            }

            table {
                border-collapse: collapse;
                background-color: lightyellow;
            }

            td {
                cursor: pointer;
                border: 1px solid black;
                width: 40px;
                height: 40px;
                text-align:center;
            }

            td.selected {
                background-color: limegreen;
            }
            h1 {
                font-family: cursive;
                color:blue;
                text-align:center;
            }
            li {
                color:red;
                font-size:18;
            }

            .result{
                color:green;
            }

            body{
                display: flex;
                margin: auto;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .content_wrapper{
                display: flex;
            }

            .words{
                margin-left: 1rem;
            }

            .clues{
                margin-top: 1rem;
            }

        </style>
    </head>
    <body>
        <h1>Word Search</h1>
        <div class="content_wrapper">
        <table data-search-area>
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">S</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">M</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">E</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">I</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">A</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">S</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">R</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">S</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">C</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">I</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">H</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">N</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">G</td>
                <td></td>
            </tr>    
            <tr>
                <td class="PERSONS">P</td>
                <td class="PERSONS">E</td>
                <td class="PERSONS">R</td>
                <td class="PERSONS">S</td>
                <td class="PERSONS">O</td>
                <td class="PERSONS">N</td>
                <td class="PERSONS">S</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">F</td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">O</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">R</td>
            </tr>        
            </table>
            <ul class="words" data-display-result>
                    <li>Word 1</li>
                    <li>Word 2</li>
                    <li>Word 3</li>
                    <li>Word 4</li>
            </ul>
        </div>
            <ul class="clues">
                <li> Hint: A task we asked you to perform in this experiment </li>
            </ul>
    </body>
</html>




Yeah, it'd be a bit of work, but it's doable.

Thank you, Dave. Would you offer some suggestions? How would you go about creating a word grid and making the letters highlightable?

Dave
Dave
Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)
Group: Administrators
Posts: 13K, Visits: 104K
chenxyu - 6/15/2022
Dave - 6/15/2022
chenxyu - 6/15/2022
Thank you, Dave! Can I ask you another question? As you can see, I included an HTML file in my script. The HTML file is a word search puzzle that I plan to ask my participants to solve. The HTML is programmed in a way that those who successfully solve the puzzle will get a correct feedback message. Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

> Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

No, Inquisit doesn't have any access to whatever it is the HTML code does. If said word search puzzle isn't too complicated (I don't have your HTML file, so I have no idea how exactly the puzzle looks like), the better option would be to implement the puzzle directly in Inquisit syntax.
I'm attaching the HTML source code here. Would something like this be possibly implenmented in Inquisit?

<!doctype html>

<html>
    <head>
        <script>


            window.onload = function() {
                for (let node of document.querySelectorAll("td")) {
                    
                    node.onclick = function () {
                        if (!node.classList.contains("selected")) {
                            node.classList.add("selected")
                        } else {
                            node.classList.remove("selected")
                        }
                    }
                    if (node.textContent != "") continue;
                    let charCode = Math.round(65 + Math.random() * 25)
                    node.textContent = String.fromCharCode(charCode)
                }

                const table = document.querySelector("[data-search-area]")
                const result = document.querySelector("[data-display-result")

                let targetElement = new Map()

                const defaultAnswer = ["SEARCH","MISSING","FOR","PERSONS"]

                table.addEventListener("click", e => {
                    if(e.target.tagName.toLowerCase() === "td"){
                        const answerClassName = e.target.classList[0]
                        if(defaultAnswer.indexOf(answerClassName) !== -1){

                            targetElement.set(answerClassName,(targetElement.get(answerClassName) || new Set()).add(e.target))
                            
                            if(targetElement.get(answerClassName).size === answerClassName.length){
                                for(let element of targetElement.get(answerClassName)){
                                    element.style.backgroundColor = "tomato"
                                }
                            }
                        }

                        if(targetElement.size === defaultAnswer.length){
                            if([...targetElement.keys()].every(key => targetElement.get(key).size === key.length)){
                                result.innerHTML = "<p class='result'>Great Job!</p>"
                                console.log("YES")
                            }
                        }
                    }
                })

            }





        </script>    
        <style>
            *{
                margin: 0;
                padding: 0;
            }


            ul li {
                list-style-type: none;
            }

            td.correct {
                background-color: tomato;
            }

            table {
                border-collapse: collapse;
                background-color: lightyellow;
            }

            td {
                cursor: pointer;
                border: 1px solid black;
                width: 40px;
                height: 40px;
                text-align:center;
            }

            td.selected {
                background-color: limegreen;
            }
            h1 {
                font-family: cursive;
                color:blue;
                text-align:center;
            }
            li {
                color:red;
                font-size:18;
            }

            .result{
                color:green;
            }

            body{
                display: flex;
                margin: auto;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .content_wrapper{
                display: flex;
            }

            .words{
                margin-left: 1rem;
            }

            .clues{
                margin-top: 1rem;
            }

        </style>
    </head>
    <body>
        <h1>Word Search</h1>
        <div class="content_wrapper">
        <table data-search-area>
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">S</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">M</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">E</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">I</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">A</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">S</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">R</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">S</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">C</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">I</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">H</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">N</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">G</td>
                <td></td>
            </tr>    
            <tr>
                <td class="PERSONS">P</td>
                <td class="PERSONS">E</td>
                <td class="PERSONS">R</td>
                <td class="PERSONS">S</td>
                <td class="PERSONS">O</td>
                <td class="PERSONS">N</td>
                <td class="PERSONS">S</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">F</td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">O</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">R</td>
            </tr>        
            </table>
            <ul class="words" data-display-result>
                    <li>Word 1</li>
                    <li>Word 2</li>
                    <li>Word 3</li>
                    <li>Word 4</li>
            </ul>
        </div>
            <ul class="clues">
                <li> Hint: A task we asked you to perform in this experiment </li>
            </ul>
    </body>
</html>




Yeah, it'd be a bit of work, but it's doable.
chenxyu
chenxyu
Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)
Group: Forum Members
Posts: 18, Visits: 252
Dave - 6/15/2022
chenxyu - 6/15/2022
Thank you, Dave! Can I ask you another question? As you can see, I included an HTML file in my script. The HTML file is a word search puzzle that I plan to ask my participants to solve. The HTML is programmed in a way that those who successfully solve the puzzle will get a correct feedback message. Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

> Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

No, Inquisit doesn't have any access to whatever it is the HTML code does. If said word search puzzle isn't too complicated (I don't have your HTML file, so I have no idea how exactly the puzzle looks like), the better option would be to implement the puzzle directly in Inquisit syntax.
I'm attaching the HTML source code here. Would something like this be possibly implenmented in Inquisit?

<!doctype html>

<html>
    <head>
        <script>


            window.onload = function() {
                for (let node of document.querySelectorAll("td")) {
                    
                    node.onclick = function () {
                        if (!node.classList.contains("selected")) {
                            node.classList.add("selected")
                        } else {
                            node.classList.remove("selected")
                        }
                    }
                    if (node.textContent != "") continue;
                    let charCode = Math.round(65 + Math.random() * 25)
                    node.textContent = String.fromCharCode(charCode)
                }

                const table = document.querySelector("[data-search-area]")
                const result = document.querySelector("[data-display-result")

                let targetElement = new Map()

                const defaultAnswer = ["SEARCH","MISSING","FOR","PERSONS"]

                table.addEventListener("click", e => {
                    if(e.target.tagName.toLowerCase() === "td"){
                        const answerClassName = e.target.classList[0]
                        if(defaultAnswer.indexOf(answerClassName) !== -1){

                            targetElement.set(answerClassName,(targetElement.get(answerClassName) || new Set()).add(e.target))
                            
                            if(targetElement.get(answerClassName).size === answerClassName.length){
                                for(let element of targetElement.get(answerClassName)){
                                    element.style.backgroundColor = "tomato"
                                }
                            }
                        }

                        if(targetElement.size === defaultAnswer.length){
                            if([...targetElement.keys()].every(key => targetElement.get(key).size === key.length)){
                                result.innerHTML = "<p class='result'>Great Job!</p>"
                                console.log("YES")
                            }
                        }
                    }
                })

            }





        </script>    
        <style>
            *{
                margin: 0;
                padding: 0;
            }


            ul li {
                list-style-type: none;
            }

            td.correct {
                background-color: tomato;
            }

            table {
                border-collapse: collapse;
                background-color: lightyellow;
            }

            td {
                cursor: pointer;
                border: 1px solid black;
                width: 40px;
                height: 40px;
                text-align:center;
            }

            td.selected {
                background-color: limegreen;
            }
            h1 {
                font-family: cursive;
                color:blue;
                text-align:center;
            }
            li {
                color:red;
                font-size:18;
            }

            .result{
                color:green;
            }

            body{
                display: flex;
                margin: auto;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .content_wrapper{
                display: flex;
            }

            .words{
                margin-left: 1rem;
            }

            .clues{
                margin-top: 1rem;
            }

        </style>
    </head>
    <body>
        <h1>Word Search</h1>
        <div class="content_wrapper">
        <table data-search-area>
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">S</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">M</td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">E</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">I</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">A</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">S</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">R</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">S</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">C</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">I</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td class="SEARCH">H</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">N</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="MISSING">G</td>
                <td></td>
            </tr>    
            <tr>
                <td class="PERSONS">P</td>
                <td class="PERSONS">E</td>
                <td class="PERSONS">R</td>
                <td class="PERSONS">S</td>
                <td class="PERSONS">O</td>
                <td class="PERSONS">N</td>
                <td class="PERSONS">S</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">F</td>
                <td></td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">O</td>
                <td></td>
            </tr>    
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td class="FOR">R</td>
            </tr>        
            </table>
            <ul class="words" data-display-result>
                    <li>Word 1</li>
                    <li>Word 2</li>
                    <li>Word 3</li>
                    <li>Word 4</li>
            </ul>
        </div>
            <ul class="clues">
                <li> Hint: A task we asked you to perform in this experiment </li>
            </ul>
    </body>
</html>




Dave
Dave
Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)
Group: Administrators
Posts: 13K, Visits: 104K
chenxyu - 6/15/2022
Thank you, Dave! Can I ask you another question? As you can see, I included an HTML file in my script. The HTML file is a word search puzzle that I plan to ask my participants to solve. The HTML is programmed in a way that those who successfully solve the puzzle will get a correct feedback message. Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

> Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?

No, Inquisit doesn't have any access to whatever it is the HTML code does. If said word search puzzle isn't too complicated (I don't have your HTML file, so I have no idea how exactly the puzzle looks like), the better option would be to implement the puzzle directly in Inquisit syntax.
chenxyu
chenxyu
Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)
Group: Forum Members
Posts: 18, Visits: 252
Thank you, Dave! Can I ask you another question? As you can see, I included an HTML file in my script. The HTML file is a word search puzzle that I plan to ask my participants to solve. The HTML is programmed in a way that those who successfully solve the puzzle will get a correct feedback message. Is there a way to reference this message and set it as correct response in Inquisit 5 so that I know who successfully solve the puzzle?
Dave
Dave
Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)
Group: Administrators
Posts: 13K, Visits: 104K
chenxyu - 6/15/2022
Hello,
I'm also using Inquisit 5. My problem related to the timer is that it will not run until after all the stimuli are presented. Specifically, I would like participants to work on a word puzzle for 3 minutes while they can see a timer counting down from 3-min. However, if some finish early, they can move on to the next phase by clicking on Continue after 30s. It all works fine in Inquisit 6, but when I set it up in Inquisit 5, the timer will not change after until 30s has passed. Basically, from 3:00 - 2:30, the clock will not change. Any suggestions?


<html wordsearch>
/ items = ("word search.html")
/ position = (35, 50)
/ size = (80%, 80%)
</html>

<clock timer>
/ mode = timer
/ resetrate = block
/ txcolor = black
/ txbgcolor = cadetblue
/ timeout = 180000
/ position = (90%, 90%)
/ format = "mm:ss"
/ size = (5%, 5%)
</clock>

<text Continue>
/ items = ("Continue")
/ size = (10%, 5%)
/ position = (50%, 95%)
/ txbgcolor = grey
/ vjustify = center
</text>

<trial wordsearch>
/ stimulustimes = [1=wordsearch,timer;30000=Continue]
/ timeout = 180000
/ inputdevice = mouse
/ validresponse = (Continue)
</trial>

> Any suggestions?

No. It's a bug in Inquisit 5 and unfortunately there is no known workaround.



chenxyu
chenxyu
Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)Associate Member (250 reputation)
Group: Forum Members
Posts: 18, Visits: 252
Hello,
I'm also using Inquisit 5. My problem related to the timer is that it will not run until after all the stimuli are presented. Specifically, I would like participants to work on a word puzzle for 3 minutes while they can see a timer counting down from 3-min. However, if some finish early, they can move on to the next phase by clicking on Continue after 30s. It all works fine in Inquisit 6, but when I set it up in Inquisit 5, the timer will not change after until 30s has passed. Basically, from 3:00 - 2:30, the clock will not change. Any suggestions?


<html wordsearch>
/ items = ("word search.html")
/ position = (35, 50)
/ size = (80%, 80%)
</html>

<clock timer>
/ mode = timer
/ resetrate = block
/ txcolor = black
/ txbgcolor = cadetblue
/ timeout = 180000
/ position = (90%, 90%)
/ format = "mm:ss"
/ size = (5%, 5%)
</clock>

<text Continue>
/ items = ("Continue")
/ size = (10%, 5%)
/ position = (50%, 95%)
/ txbgcolor = grey
/ vjustify = center
</text>

<trial wordsearch>
/ stimulustimes = [1=wordsearch,timer;30000=Continue]
/ timeout = 180000
/ inputdevice = mouse
/ validresponse = (Continue)
</trial>

GO

Merge Selected

Merge into selected topic...



Merge into merge target...



Merge into a specific topic ID...




Reading This Topic

Explore
Messages
Mentions
Search