<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Exercise 4: Definite and indefinite articles</title>

        <meta name="description" content="Exercise 4: Definite and indefinite articles">

        <meta name="keywords" content="definite articles, indefinite articles, English grammar">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



        <script type="text/javascript">

            try {

                // App Javascript Goes Here. Place your entire script content inside the try block for error handling.

                

                // This will run when the DOM is ready.

                document.addEventListener("DOMContentLoaded", function() {

                    // Add event listeners to the words

                    let words = document.getElementsByClassName("word");

                    for (let i = 0; i < words.length; i++) {

                        words[i].addEventListener("click", function() {

                            this.classList.toggle("selected");

                        });

                    }

                    

                    // Get the sentence button

                    let sentenceButton = document.getElementById("sentenceButton");

                    sentenceButton.addEventListener("click", function() {

                        let selectedWords = document.getElementsByClassName("selected");

                        let sentence = "";

                        for (let i = 0; i < selectedWords.length; i++) {

                            sentence += selectedWords[i].innerText + " ";

                        }

                        alert(sentence.trim());

                    });

                });



            } catch (error) {

                 // This will throw the error to the parent window.

                throw error;

            }

        </script>

        

        <style>

            /* App CSS Goes Here */

            .word {

                display: inline-block;

                padding: 5px;

                margin: 5px;

                border: 1px solid #ccc;

                cursor: pointer;

            }

            

            .selected {

                background-color: #f0f0f0;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <!-- App HTML Goes Here -->

            <div class="row">

                <div class="col">

                    <p>Click on the words in the correct order.</p>

                    <div class="word">Put</div>

                    <div class="word">the</div>

                    <div class="word">apples</div>

                    <div class="word">in</div>

                    <div class="word">a</div>

                    <div class="word">dish.</div>

                </div>

            </div>

            <div class="row">

                <div class="col">

                    <p>Mix</p>

                    <div class="word">butter</div>

                    <div class="word">in</div>

                    <div class="word">a</div>

                    <div class="word">bowl.</div>

                    <div class="word">some</div>

                    <div class="word">flour</div>

                    <div class="word">and</div>

                </div>

            </div>

            <div class="row">

                <div class="col">

                    <p>Serve</p>

                    <div class="word">the</div>

                    <div class="word">soup</div>

                    <div class="word">in</div>

                    <div class="word">the</div>

                    <div class="word">small</div>

                    <div class="word">bowls.</div>

                </div>

            </div>

            <div class="row">

                <div class="col">

                    <p>Slice</p>

                    <div class="word">this</div>

                    <div class="word">with</div>

                    <div class="word">the</div>

                    <div class="word">potatoes</div>

                    <div class="word">knife.</div>

                </div>

            </div>

            <div class="row">

                <div class="col">

                    <p>Fry</p>

                    <div class="word">an</div>

                    <div class="word">apple</div>

                    <div class="word">pie</div>

                    <div class="word">I</div>

                    <div class="word">made</div>

                    <div class="word">at</div>

                    <div class="word">school.</div>

                </div>

            </div>

            <div class="row">

                <div class="col">

                    <p>Fry</p>

                    <div class="word">chicken</div>

                    <div class="word">in</div>

                    <div class="word">a</div>

                    <div class="word">pan.</div>

                </div>

            </div>

            <div class="row">

                <div class="col">

                    <button id="sentenceButton">Create Sentence</button>

                </div>

            </div>

        </div>

    </body>

</html>