Untitled


<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <style id="stndz-style"></style>
    <title>Match the following</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
    <style>


        body,
        html {
            text-align: center;
            margin: auto;
        }
        body{
            font-family: 'Poppins', sans-serif;
        }
        #theGame{
            height: 100vh;
        }
        img {
            max-width: 100%;
            height: auto
        }

        * {
            box-sizing: border-box
        }

        #matching-game {
            padding: 20px;
            max-width: 800px;
            margin: 0 auto
        }

        .right-container .right-item {
            margin-left: auto
        }

        .row {
            margin-left: -15px;
            margin-right: -15px
        }

            .row .col {
                padding-left: 15px;
                padding-right: 15px
            }

            .row.two-col .col {
                max-width: 50%;
                flex-basis: 50%
            }

        .d-flex {
            display: flex;
            flex-wrap: wrap
        }

        .left-item,
        .right-item {
            margin: 0 auto 15px;
            border: 2px solid rgba(33,105,249,0.1);
            border-radius: 4px;
            cursor: pointer;
            position: relative;
            overflow:hidden;
            width: 150px;
            height: 100px;
            border-radius: 6px;
            object-fit: contain;
        }

            .left-item .text-content,
            .right-item .text-content {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                font-size: 14px;
                font-weight: 500;
                line-height: 16px;
                width:100%;
                word-break: break-all;
                font-family: 'Poppins', sans-serif;
            }

        .image-content > img {
            object-fit: cover;
            height: 100%
        }

        .left-selected,
        .right-selected {
            background: rgba(33,105,249,0.1);
            border: 2px solid rgba(33,105,249,0.8);
        }


        .message-container {
            height: 30px
        }

        .match-complete {
            background: rgba(33,105,249,0.1);
        }

        .correct-match {
            border-color: #2BAC76 !important;
            position: relative;
        }

        .incorrect-match {
            border-color: #ff5252 !important;
            position: relative;
        }

            .incorrect-match:before,
            .correct-match:before {
                position: absolute;
                display: block;
                font-size: 16px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                top: 0;
                right: 0;
                font-family: "FontAwesome";
            }


            .incorrect-match:before {
                content: "\f00d";
                color: #ff5252;
            }

        .correct-match:before {
            content: "\f00c";
            color: #2BAC76;
        }
        .jquery-line {
            height: 2px !important;
            background-color: rgba(33,105,249,0.8) !important;
            position: relative;
        }
        .jquery-line:after,
        .jquery-line:before{
            position: absolute;
            display: block;
            font-family: "FontAwesome";
            top: -7px;
            color:rgba(33,105,249,0.8);
        }
        .jquery-line:after{
            left: -2px;
            content: "\F053";
        }
        .jquery-line:before{
            right: -2px;
            content: "\F054";


        }

        .btn-wrapper .btn {
            margin: 0 10px;
            margin-bottom: 20px;
        }

        .btn {
            display: inline-flex;
            padding: 0 30px;
            font-size: 14px;
            min-width: 64px;
            line-height: 38px;
            box-sizing: border-box;
            height: 40px;
            font-weight: 400;
            border-radius: 30px;
            border:none;
            text-transform: capitalize;
            background: transparent;
            font-family: 'Poppins', sans-serif;
        }
        .btn-primary{
            background:#2169f9;
            color: #fff;
        }

        .btn-primary:hover {
            background: #2169f9;
            box-shadow: 0 14px 26px -12px rgba(33, 105, 249, 0.42),
                        0 4px 23px 0 rgba(0, 0, 0, 0.12),
                        0 8px 10px -5px rgba(33, 105, 249, 0.2);
            color: #fff;
        }

        .game-description {
            padding: 30px;
        }

            .game-description h1 {
                font-size: 26px;
                font-weight: 400;
                line-height: 28px;
                display: inline-block;
                margin: 10px 0 15px;
                text-align: center;
                color: #333;
                text-transform: capitalize
            }

            .game-description p {
                font-size: 14px;
                line-height: 24px;
                margin: 0;
                padding: 0 30px 15px;
            }
    </style>
</head>

<body>
    <!-- LOAD SCRIPTS -->
    <script src="../js//jquery.js"></script>
    <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../js/handlebars-v4.1.2.js"></script>
    <script src="../../AppAssets/js/helpers.js" type="text/javascript"></script>
    <script src="../../AppAssets/js/jquery.domline.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../AppAssets/js/match-the-following.js"></script>

    <script id="match-template" type="text/x-handlebars-template">
        <div class="container">
            <div class="message-container">&nbsp;</div>
            <div class="row two-col d-flex">
                <div class="col left-container">
                    {{#each data.left}}
                    <div class="left-item" data-i="{{i}}">
                        {{#ifEqual type "text"}}
                        <span class="text-content">{{content}}</span>
                        {{/ifEqual}}
                        {{#ifEqual type "image"}}
                        <span class="image-content"><img src="{{content}}"></span>
                        {{/ifEqual}}
                    </div>
                    {{/each}}
                </div>
                <div class="col right-container">
                    {{#each data.right}}
                    <div class="right-item" data-i="{{i}}">
                        {{#ifEqual type "text"}}
                        <span class="text-content">{{content}}</span>
                        {{/ifEqual}}
                        {{#ifEqual type "image"}}
                        <span class="image-content"><img src="{{content}}"></span>
                        {{/ifEqual}}
                    </div>
                    {{/each}}
                </div>
            </div>
        </div>
    </script>

    <div id=matching-game></div>
    <button id="submit-button" style="display:none;"></button>
    <script src="../js/game-script.js" type="text/javascript"></script>

    <script type="text/javascript">
        let gameData = [];
        let userResult = [];
        let isTestMode = false;
        let playSounds = true;
        let submitResult = false;
        let audioPath = "";
        const submitButton = document.getElementById("submit-button");

        var gameEvents = new GameEvents(submitButton);
        function submitGame() {
            submitResult = true;
            let totalItems = gameData.left.length;

            if (userResult.length !== totalItems) {
                self.showMessage("Please answer all of the questions!!!");
                return;
            }
            $("#matching-game").MatchingGame("showAllResults");
            gameEvents.saveResult(userResult);
        }

        function setupGame() {
            let self = this;
            let opts = {
                instantResult: isTestMode === false,
                allowEdit: true,
                template: Handlebars.compile(jQuery("#match-template").html()),
                data: gameData
            };
            jQuery("#matching-game").MatchingGame(opts)
                .on("gameComplete", function (e, d) {
                    userResult = d;
                });

            $(submitButton).on("click", function () {
                self.submitGame();
            });

            gameEvents.gameLoaded();
        }
    </script>
</body>

</html>