<?xml version="1.0" encoding="UTF-8"?>
<!-- This XML file has been created by Easy JavaScript Simulations (EjsS). Visit http://www.um.es/fem/Ejs. -->
<!-- Please, save the file to your hard disk on your Ejs' user directory and open it with Ejs. -->
<Osejs version="6.1 BETA">
<Osejs.Information>
<Title><![CDATA[Matching Game of 9 by 9 cards]]></Title>
<Copyright><![CDATA[]]></Copyright>
<Keywords><![CDATA[]]></Keywords>
<Level><![CDATA[]]></Level>
<Language><![CDATA[]]></Language>
<Abstract><![CDATA[]]></Abstract>
<FixedNavigationBar>false</FixedNavigationBar>
<RunAlways>true</RunAlways>
<UseInterpreter>true</UseInterpreter>
<UseDeltaForODE>false</UseDeltaForODE>
<ModelTab></ModelTab>
<ModelTabTitle><![CDATA[]]></ModelTabTitle>
<ModelName><![CDATA[]]></ModelName>
<CSSFile></CSSFile>
<StaticImages>
</StaticImages>
<HTMLHead><![CDATA[<script async="true" src="https://www.googletagmanager.com/gtag/js?id=UA-3326007-19"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-3326007-19');
</script>
<script data-ad-client="ca-pub-0121577198857509" async="true" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>]]></HTMLHead>
<Logo>./cardMatching/Screenshot 2021-01-29 at 1.30.31 PM (2).png</Logo>
<Author><![CDATA[Shaun Quek; lookang; based on idea by Kishan]]></Author>
<AuthorLogo>;;</AuthorLogo>
<DetectedFiles><![CDATA[%card_icon%;./cardMatching/Ding Sound Effect.m4a;./cardMatching/Screenshot 2021-01-29 at 1.30.31 PM (2).png;./cardMatching/Wrong-answer-sound-effect.mp3;./cardMatching/applause2.mp3;]]></DetectedFiles>
<AuxiliaryFiles><![CDATA[./cardMatching/;]]></AuxiliaryFiles>
</Osejs.Information>
<Osejs.Description>
<Osejs.Description.Page>
<Type>DESCRIPTION_EDITOR</Type>
<Name>Desc Page</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<OneHTMLPage>
  <Locale>_default_</Locale>
  <Title>Desc Page</Title>
  <External>false</External>
  <![CDATA[
<html>
  <head>
    <style type="text/css">
      <!--
        ﻿ body { margin-top: 1%; margin-right: 1%; margin-bottom: 1%; margin-left: 1%; text-align: justify; font-size: medium; font-family: Georgia, Times New Roman, Times, serif }
        h1 { text-indent: 0px; text-align: left; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; color: #0000C8; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; font-size: 135% !important }
        h2 { text-indent: 0px; text-align: left; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; color: #000777; font-size: 120% !important }
        h3 { text-indent: 0px; text-align: left; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; color: navy; font-size: 110% !important }
        h4 { text-indent: 0px; text-align: left; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
        h5 { text-indent: 0px; text-align: left; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
        h6 { text-indent: 0px; text-align: left; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }
        li { text-align: left; margin-top: 0; margin-bottom: 0 }
        p { line-height: 1.5em; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; text-align: justify }
        a:link { color: red }
        a:visited { color: fuchsia }
        address { margin-top: 0; padding-top: 0; border-top-color: border-color; border-top-style: dotted; border-top-width: thin }
        button { font-family: Georgia, Times New Roman, Times, serif; font-size: 1em; color: black }
        input { font-size: 0.70em; background-repeat: repeat; background-attachment: scroll; color: black }
        div.experiment p { display: inline }
        .ArrayPanel { border-top-color: black; border-top-style: solid; border-top-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px; display: table; width: 100% }
        .DataTable { border-top-color: black; border-top-style: solid; border-top-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px; display: table; width: 100% }
        .ArrayPanel thead { float: left; width: 100%; background-repeat: repeat; background-attachment: scroll }
        .ArrayPanel tbody { float: left; width: 100% }
        .ArrayPanel tr { width: 100%; display: table }
        .DataPanel tr { width: 100%; display: table }
        .ArrayPanel th { width: 1%; border-top-color: black; border-top-style: solid; border-top-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px; text-align: center }
        .DataTable th { width: 1%; border-top-color: black; border-top-style: solid; border-top-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px; text-align: center }
        .ArrayPanel td { width: 1%; border-top-color: black; border-top-style: solid; border-top-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px; text-align: right }
        .DataTable td { width: 1%; border-top-color: black; border-top-style: solid; border-top-width: 1px; border-right-color: black; border-right-style: solid; border-right-width: 1px; border-bottom-color: black; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: black; border-left-style: solid; border-left-width: 1px; text-align: right }
        .DataTable thead { background-repeat: repeat; background-attachment: scroll }
        .BoxPanel { background-color: red; background-repeat: repeat; background-attachment: scroll }
        ._TabbedPanel.span { display: table; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0 }
        ._TabbedPanel.ul { list-style-type: none; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0 }
        ._TabbedPanel.li { float: left; text-align: center; margin-top: 0; margin-bottom: 0; border-top-color: #ccc; border-top-style: solid; border-top-width: 1px; border-right-color: #ccc; border-right-style: solid; border-right-width: 1px; border-bottom-color: #ccc; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: #ccc; border-left-style: solid; border-left-width: 1px }
        ._TabbedPanel.a { display: inline-block; color: black; text-align: center; padding-top: 7px; padding-bottom: 7px; padding-right: 8px; padding-left: 8px; text-decoration: none; font-size: 14px }
        ï»¿ body { text-align: justify; font-size: medium; font-family: Georgia, Times New Roman, Times, serif }
      -->
    </style>
    
  </head>
  <body>
    <p style="margin-top: 0">
      
    </p>
    <h1>
      Card Matching Game
    </h1>
    <h2>
      Introduction
    </h2>
    As part of the LSS Syllabus, Secondary 1 students are expected to learn 
    the following about the Globally Harmonised System (GHS). This application 
    aims to make learning about lab safety more enjoyable and interesting for 
    students.

    <h2>
      What this game is
    </h2>
    This is a simple memory-match game.

    <ul>
      <li>
        18 cards (9 symbol cards, 9 explanation cards) are faced down randomly 
        on the play-space
      </li>
      <li>
        Students click on two cards and if they match, they get a point.
      </li>
      <li>
        If they don&#8217;t match, the student has to try again to pick a correct 
        pair
      </li>
      <li>
        They continue doing this until all 9 pairs are successfully match
      </li>
    </ul>
  </body>
</html>

]]>
</OneHTMLPage>
</Content>
</Osejs.Description.Page>
</Osejs.Description>
<Osejs.Model>
<Osejs.Model.FramesPerSecond>20</Osejs.Model.FramesPerSecond>
<Osejs.Model.StepsPerDisplay>1</Osejs.Model.StepsPerDisplay>
<Osejs.Model.Autostart>true</Osejs.Model.Autostart>
<Osejs.Model.Variables>
<Osejs.Model.Variables.Page>
<Type>VARIABLE_EDITOR</Type>
<Name>EditableVariable</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<PageComment><![CDATA[]]></PageComment>
<Variable>
<Name><![CDATA[n]]></Name>
<Value><![CDATA[18]]></Value>
<Type><![CDATA[int]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[countdown]]></Name>
<Value><![CDATA[2]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[amount of time before game starts]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[icon]]></Name>
<Value><![CDATA[[ "./cardMatching/Picture1.png", "./cardMatching/Picture2.png", "./cardMatching/Picture3.png", "./cardMatching/Picture4.png", "./cardMatching/Picture5.png", "./cardMatching/Picture6.png", "./cardMatching/Picture7.png", "./cardMatching/Picture8.png", "./cardMatching/Picture9.png" ];]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[[n/2]]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[desc]]></Name>
<Value><![CDATA[[ "./cardMatching/Picture10.png", "./cardMatching/Picture11.png", "./cardMatching/Picture12.png", "./cardMatching/Picture13.png", "./cardMatching/Picture14.png", "./cardMatching/Picture15.png", "./cardMatching/Picture16.png", "./cardMatching/Picture17.png", "./cardMatching/Picture18.png" ];]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[[n/2]]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[mode]]></Name>
<Value><![CDATA[1]]></Value>
<Type><![CDATA[int]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[]]></Name>
<Value><![CDATA[]]></Value>
<Type><![CDATA[int]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
</Content>
</Osejs.Model.Variables.Page>
<Osejs.Model.Variables.Page>
<Type>VARIABLE_EDITOR</Type>
<Name>Var Table</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<PageComment><![CDATA[]]></PageComment>
<Variable>
<Name><![CDATA[card_id]]></Name>
<Value><![CDATA[0]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[[n]]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[There are a total of n/2 unique card_ids: each number represents one set of logo/desc ]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[card_type]]></Name>
<Value><![CDATA[0]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[[n]]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[there are 2 card_types: 0 is for symbol, 1 is for descriptions]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[card_width]]></Name>
<Value><![CDATA[1]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[card_height]]></Name>
<Value><![CDATA[1]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[x]]></Name>
<Value><![CDATA[0]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[[n]]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[y]]></Name>
<Value><![CDATA[0]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[[n]]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[margin_x]]></Name>
<Value><![CDATA[0.3]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[margin_y]]></Name>
<Value><![CDATA[0.3]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[prev_id]]></Name>
<Value><![CDATA[-1]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[represents the card_id of the previous card clicked]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[interact]]></Name>
<Value><![CDATA[-1]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[tracks which card is currently being clicked]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[prev_interact]]></Name>
<Value><![CDATA[-1]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[tracks which card was previously being clicked]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[back_display]]></Name>
<Value><![CDATA[1]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[[n]]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[UNUSED]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[score]]></Name>
<Value><![CDATA[0]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[game_over]]></Name>
<Value><![CDATA[0]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[game_start]]></Name>
<Value><![CDATA[0]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[]]></Name>
<Value><![CDATA[]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[]]></Name>
<Value><![CDATA[]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
</Content>
</Osejs.Model.Variables.Page>
<Osejs.Model.Variables.Page>
<Type>VARIABLE_EDITOR</Type>
<Name>Back Colors</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<PageComment><![CDATA[]]></PageComment>
<Variable>
<Name><![CDATA[select_color]]></Name>
<Value><![CDATA["rgba(255,255,0,0.1)"]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[correct_color]]></Name>
<Value><![CDATA["rgba(0,255,0,0.1)"]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[transparent_color]]></Name>
<Value><![CDATA["rgba(0, 0, 0, 0)"]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[opaque_color]]></Name>
<Value><![CDATA["black"]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[back_color]]></Name>
<Value><![CDATA[opaque_color]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[[n]]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[]]></Name>
<Value><![CDATA[]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[]]></Name>
<Value><![CDATA[]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
</Content>
</Osejs.Model.Variables.Page>
<Osejs.Model.Variables.Page>
<Type>VARIABLE_EDITOR</Type>
<Name>Timings</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<PageComment><![CDATA[]]></PageComment>
<Variable>
<Name><![CDATA[t]]></Name>
<Value><![CDATA[0]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[dt]]></Name>
<Value><![CDATA[0.05]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[time_display]]></Name>
<Value><![CDATA[""]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[card_delay]]></Name>
<Value><![CDATA[-1]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[delay_interact1]]></Name>
<Value><![CDATA[]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[delay_interact2]]></Name>
<Value><![CDATA[]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[]]></Name>
<Value><![CDATA[]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
</Content>
</Osejs.Model.Variables.Page>
<Osejs.Model.Variables.Page>
<Type>VARIABLE_EDITOR</Type>
<Name>Card Icons</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<PageComment><![CDATA[]]></PageComment>
<Variable>
<Name><![CDATA[card_icon]]></Name>
<Value><![CDATA[""]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[[n]]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[]]></Name>
<Value><![CDATA[]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
</Content>
</Osejs.Model.Variables.Page>
<Osejs.Model.Variables.Page>
<Type>VARIABLE_EDITOR</Type>
<Name>lookang</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<PageComment><![CDATA[]]></PageComment>
<Variable>
<Name><![CDATA[font]]></Name>
<Value><![CDATA["normal normal 2vw "]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[hint]]></Name>
<Value><![CDATA[""]]></Value>
<Type><![CDATA[String]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
<Variable>
<Name><![CDATA[]]></Name>
<Value><![CDATA[]]></Value>
<Type><![CDATA[double]]></Type>
<Dimension><![CDATA[]]></Dimension>
<Domain><![CDATA[public]]></Domain>
<Comment><![CDATA[null]]></Comment>
</Variable>
</Content>
</Osejs.Model.Variables.Page>
</Osejs.Model.Variables>
<Osejs.Model.Initialization>
<Osejs.Model.Initialization.Page>
<Type>CODE_EDITOR</Type>
<Name>Init Page</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
// initialising img_url
// put in variables to allow editing on https://ejss-browser-editor.herokuapp.com/
// teachers need to replace their own Picture1.png Picture2.png with their own pictures
// teachers need to replace their own Picture10.png Picture11.png with their own pictures
// Picture1.png match Picture10.png etc the match order cannot be changed
// lookang
/*
icon = [
"./cardMatching/Picture1.png",
"./cardMatching/Picture2.png",
"./cardMatching/Picture3.png",
"./cardMatching/Picture4.png",
"./cardMatching/Picture5.png",
"./cardMatching/Picture6.png",
"./cardMatching/Picture7.png",
"./cardMatching/Picture8.png",
"./cardMatching/Picture9.png"
];

desc = [
"./cardMatching/Picture10.png",
"./cardMatching/Picture11.png",
"./cardMatching/Picture12.png",
"./cardMatching/Picture13.png",
"./cardMatching/Picture14.png",
"./cardMatching/Picture15.png",
"./cardMatching/Picture16.png",
"./cardMatching/Picture17.png",
"./cardMatching/Picture18.png"
];

*/
// initialising x and y position
for(var i = 0; i < n; i++){
  x[i] = card_width * (i % 6);
  if(i % 6)
    x[i] += margin_x * (i % 6);// margin_x=0.3 spacing between cards
    
  y[i] = card_height * Math.floor(i / 6);
  if(Math.floor(i / 6))
    y[i] += margin_y * Math.floor(i / 6);
}
//console.log(x, y);

// randomise cards
randomisePos();



]]></Code>
</Content>
</Osejs.Model.Initialization.Page>
<Osejs.Model.Initialization.Page>
<Type>CODE_EDITOR</Type>
<Name>message</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
if (_isMobile){
  //do nothing
  }
  
  else{
    // copy this into the initialization
// make the font bigger

_view.cardDisplay.getMessageDecoration("TL").getFont().setFontSize("1vw");
_view.cardDisplay.getMessageDecoration("TR").getFont().setFontSize("1vw");
_view.cardDisplay.getMessageDecoration("BL").getFont().setFontSize("1vw");
_view.cardDisplay.getMessageDecoration("BR").getFont().setFontSize("1vw");
    }
]]></Code>
</Content>
</Osejs.Model.Initialization.Page>
<Osejs.Model.Initialization.Page>
<Type>CODE_EDITOR</Type>
<Name>debug</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
// copy paste into TL message to see the values
//"back_color="+back_color+"\ninteract="+interact+"\nprev_interact="+prev_interact+"mode="+mode


]]></Code>
</Content>
</Osejs.Model.Initialization.Page>
</Osejs.Model.Initialization>
<Osejs.Model.Evolution>
<Osejs.Model.Evolution.Page>
<Type>EVOLUTION_EDITOR</Type>
<Name>Evol Page</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
if(game_start && !game_over)
  t += dt;

if(card_delay != -1 && t - card_delay >= 1){
  // _tools.showOkDialog("Card doesn't match!");
  hint= "Card doesn't match!"; // lookang change to hint to ease clicking fast
  _view.audio2.play() // play wrongsound
  
  // change the colors of the cards back based on the game mode
  if(mode == 1){
    back_color[delay_interact1] = transparent_color;
    back_color[delay_interact2] = transparent_color;
  }
  else if(mode == 2){ // memory game
    back_color[delay_interact1] = opaque_color;
    back_color[delay_interact2] = opaque_color;
  }
  // deactiate card_delay
  card_delay = -1;
}

]]></Code>
</Content>
</Osejs.Model.Evolution.Page>
</Osejs.Model.Evolution>
<Osejs.Model.Constraints>
<Osejs.Model.Constraints.Page>
<Type>CODE_EDITOR</Type>
<Name>FixRel Page</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
if(game_over == true || game_start == false)
  return; // do ntg
  
var cur_time = t;
var min = Math.floor(cur_time / 60), sec = Math.floor(cur_time % 60);
if(min < 10)
  min = "0" + min;
if(sec < 10)
  sec = "0" + sec;
  // dont control css style here
//time_display = `<h2 style='text-align: center'>Timer: ${min}:${sec}</h2>`;
time_display = "⌛Timer: "+min+":"+sec;

]]></Code>
</Content>
</Osejs.Model.Constraints.Page>
</Osejs.Model.Constraints>
<Osejs.Model.Library>
<Osejs.Model.Library.Page>
<Type>LIBRARY_EDITOR</Type>
<Name>randomisePos</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<Comment><![CDATA[]]></Comment>
<Code><![CDATA[
function randomisePos() {
  // card_type : 0 is symbol, 1 is description
  // card_id : 0 to 8, each number represents one set of symbol / description
  var id_arr = [];
  for(var i = 0; i < n; i++){
    // creates an array that looks like [[0, 0], [0, 1], [1, 0], [1, 1], [2, 0], [2, 1] ...]
    id_arr.push([Math.floor(i / 2), i % 2]);
  }
  for(var i = 0; i < n; i++){
    // randomly get an idx
    var idx = Math.floor(Math.random() * id_arr.length);
    
    // assign the id and the type
    card_id[i] = id_arr[idx][0];
    card_type[i] = id_arr[idx][1];
    
    // change the image based on the card type
    if(card_type[i] == 0){
      card_icon[i] = icon[card_id[i]];
    }
    else{
      card_icon[i] = desc[card_id[i]];
    }
    // remove the element from the array to prevent repetition
    id_arr.splice(idx, 1);
  }

}
]]></Code>
</Content>
</Osejs.Model.Library.Page>
</Osejs.Model.Library>
<Osejs.Model.Elements>
</Osejs.Model.Elements>
</Osejs.Model>
<Osejs.HtmlView>
<Osejs.HtmlView.Page>
<Type>HTML_VIEW_EDITOR</Type>
<Name>HtmlView Page</Name>
<Active>true</Active>
<Internal>false</Internal>
<Content>
<RootProperties>
</RootProperties>
<Tree>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.Panel</Type>
<Name><![CDATA[topPanel]]></Name>
<Property name="Font"><![CDATA[%font%]]></Property>
<Property name="Display"><![CDATA["inline-block"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Label</Type>
<Name><![CDATA[title]]></Name>
<Parent><![CDATA[topPanel]]></Parent>
<Property name="Background"><![CDATA["Cyan"]]></Property>
<Property name="Text"><![CDATA["<h1>Card Matching Game</h1>"]]></Property>
<Property name="Display"><![CDATA["none"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Label</Type>
<Name><![CDATA[modeLabel]]></Name>
<Parent><![CDATA[topPanel]]></Parent>
<Property name="Background"><![CDATA["Orange"]]></Property>
<Property name="Text"><![CDATA["Mode:"]]></Property>
<Property name="Font"><![CDATA[font]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.ComboBox</Type>
<Name><![CDATA[modeSelect]]></Name>
<Parent><![CDATA[topPanel]]></Parent>
<Property name="Options"><![CDATA[["1","2"]]]></Property>
<Property name="Background"><![CDATA["Orange"]]></Property>
<Property name="OnChange"><![CDATA[var opts = _view.modeSelect.getProperty("SelectedOptions");  // array of options
var option = (opts.length > 0)? opts[0]:""; // selected option 
mode = option
// changing the color based on the different mode
//["training", "memory game"]
//change from 1 and 2 for ease of reading
for(var i = 0; i < n; i++){
  if(mode == 1||mode =="training"){ // added 2 ways to reach this if statement
 
    back_color[i] = opaque_color;  
  // back_color[i] = transparent_color // set to transparent to see cards turn black after start button is clicked
  }
  else if(mode == 2||mode == "memory game"){
    back_color[i] = transparent_color;
  }
}

// randomise the cards to prevent cheating
randomisePos();
]]></Property>
<Property name="Disabled"><![CDATA[game_start]]></Property>
<Property name="Font"><![CDATA[font]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Label</Type>
<Name><![CDATA[timeDisplay]]></Name>
<Parent><![CDATA[topPanel]]></Parent>
<Property name="Background"><![CDATA["Magenta"]]></Property>
<Property name="Text"><![CDATA[time_display]]></Property>
<Property name="Display"><![CDATA[game_start?"inline-block":"none"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Button</Type>
<Name><![CDATA[startBtn]]></Name>
<Parent><![CDATA[topPanel]]></Parent>
<Property name="Text"><![CDATA["Start!"]]></Property>
<Property name="Width"><![CDATA["30vw"]]></Property>
<Property name="OnClick"><![CDATA[game_over = 0;
game_start = 1;

for(var i = 0; i < n; i++){
  console.log(back_color[i]);
  if(mode == 1) // assume memory game?
    back_color[i] = transparent_color;
   // back_color[i] = opaque_color; //lookang
  else if(mode == 2) // assume training?
    back_color[i] = opaque_color;
  //  back_color[i] = transparent_color; //lookang
}
var msg="Start!"
hint= msg
]]></Property>
<Property name="Display"><![CDATA["" + `${game_start ? "none" : "inline_block"}`]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Button</Type>
<Name><![CDATA[resetButton3]]></Name>
<Parent><![CDATA[topPanel]]></Parent>
<Property name="Text"><![CDATA["↻Reset"]]></Property>
<Property name="Width"><![CDATA["10vw"]]></Property>
<Property name="OnClick"><![CDATA[_reset();
//speechzh ("你好");
]]></Property>
<Property name="Font"><![CDATA["normal normal 2vw "]]></Property>
<Property name="Display"><![CDATA["inline-block"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Label</Type>
<Name><![CDATA[scoreDisplay]]></Name>
<Parent><![CDATA[topPanel]]></Parent>
<Property name="Background"><![CDATA["Yellow"]]></Property>
<Property name="Text"><![CDATA[""+ `<h2>Score: ${score}</h2>`]]></Property>
<Property name="Width"><![CDATA["20vw"]]></Property>
<Property name="Display"><![CDATA["none"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Audio</Type>
<Name><![CDATA[audio]]></Name>
<Parent><![CDATA[topPanel]]></Parent>
<Property name="AudioUrl"><![CDATA["./cardMatching/Ding Sound Effect.m4a"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Audio</Type>
<Name><![CDATA[audio2]]></Name>
<Parent><![CDATA[topPanel]]></Parent>
<Property name="AudioUrl"><![CDATA["./cardMatching/Wrong-answer-sound-effect.mp3"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Audio</Type>
<Name><![CDATA[audio3]]></Name>
<Parent><![CDATA[topPanel]]></Parent>
<Property name="AudioUrl"><![CDATA["./cardMatching/applause2.mp3"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.Panel</Type>
<Name><![CDATA[mainPanel]]></Name>
</HtmlView.Element>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.DrawingPanel</Type>
<Name><![CDATA[cardDisplay]]></Name>
<Parent><![CDATA[mainPanel]]></Parent>
<Property name="Background"><![CDATA["LightGray"]]></Property>
<Property name="Enabled"><![CDATA[game_start?true:false]]></Property>
<Property name="MaximumY"><![CDATA[card_height * 3 + margin_y * 2]]></Property>
<Property name="MaximumX"><![CDATA[card_width * 6 + margin_x * 5]]></Property>
<Property name="TRMessage"><![CDATA["Card Matching Game "+score+" / "+n/2]]></Property>
<Property name="MinimumX"><![CDATA[0]]></Property>
<Property name="MinimumY"><![CDATA[0]]></Property>
<Property name="AutoScaleY"><![CDATA[false]]></Property>
<Property name="AutoScaleX"><![CDATA[false]]></Property>
<Property name="MarginX"><![CDATA[5]]></Property>
<Property name="MarginY"><![CDATA[15]]></Property>
<Property name="CursorTypeForMove"><![CDATA["pointer"]]></Property>
<Property name="Height"><![CDATA["80vh"]]></Property>
<Property name="LineWidth"><![CDATA[0]]></Property>
<Property name="Width"><![CDATA["100%"]]></Property>
<Property name="TLMessage"><![CDATA["hint="+hint]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.Group2D</Type>
<Name><![CDATA[actual_answers_back_display_removed]]></Name>
<Parent><![CDATA[cardDisplay]]></Parent>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.ImageSet2D</Type>
<Name><![CDATA[cardIcon]]></Name>
<Parent><![CDATA[actual_answers_back_display_removed]]></Parent>
<Property name="NumberOfElements"><![CDATA[n]]></Property>
<Property name="Sensitivity"><![CDATA[0]]></Property>
<Property name="SizeX"><![CDATA[card_width]]></Property>
<Property name="RelativePosition"><![CDATA["SOUTH_WEST"]]></Property>
<Property name="X"><![CDATA[x]]></Property>
<Property name="Y"><![CDATA[y]]></Property>
<Property name="ImageUrl"><![CDATA[%card_icon%]]></Property>
<Property name="SizeY"><![CDATA[card_height]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Expanded>true</Expanded>
<Type>Elements.Group2D</Type>
<Name><![CDATA[backof_cards]]></Name>
<Parent><![CDATA[cardDisplay]]></Parent>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.ShapeSet2D</Type>
<Name><![CDATA[cardSet]]></Name>
<Parent><![CDATA[backof_cards]]></Parent>
<Property name="FillColor"><![CDATA[%back_color%]]></Property>
<Property name="RelativePosition"><![CDATA["SOUTH_WEST"]]></Property>
<Property name="ShapeType"><![CDATA["ROUND_RECTANGLE"]]></Property>
<Property name="ElementInteracted"><![CDATA[interact]]></Property>
<Property name="NumberOfElements"><![CDATA[n]]></Property>
<Property name="Sensitivity"><![CDATA[0]]></Property>
<Property name="SizeX"><![CDATA[card_width]]></Property>
<Property name="X"><![CDATA[x]]></Property>
<Property name="Y"><![CDATA[y]]></Property>
<Property name="OnPress"><![CDATA[// if card_delay is activated, don't run the rest of the code
if(card_delay != -1)
  return;

// if mode 1, if color is not transparent, don't run the rest of the code
if(mode == 1 && back_color[interact] != transparent_color)
  return;
// if mode 2, if color is not opaque, don't run the rest of the code
if(mode == 2 && back_color[interact] != opaque_color)
  return;

// turn colour to yellow
back_color[interact] = select_color;

// if the current card is the first card
if(prev_id == -1) {
  prev_id = card_id[interact];
  prev_interact = interact;
  return;
}

// if the current card is the second card
else{
  var cur_id = card_id[interact];

  // check if the 2 cards matches
  if(prev_id == cur_id) {
    score++;
    back_color[interact] = correct_color;
    back_color[prev_interact] = correct_color;
    // check for end of the game
    if(score == n / 2) {
      game_over = true;
      var msg = "Game completed!" //lookang
      _view.audio3.play() // play sound
      _tools.showOkDialog(msg);
      hint=msg;
    }
  
    // if game has not ended yet
    else {
      //  _tools.showOkDialog("Card matches!");
      hint="Card matches!";
      _view.audio.play() // play sound
    }
  }

  else {
    card_delay = t;
    // remember which pair of cards (necessary to prevent bugs)
    delay_interact1 = interact;
    delay_interact2 = prev_interact;
  }
  // preparing to select a new pair of cards
  prev_id = -1;
}
  ]]></Property>
<Property name="SizeY"><![CDATA[card_height]]></Property>
<Property name="LineWidth"><![CDATA[0]]></Property>
<Property name="EnabledPosition"><![CDATA["ENABLED_NO_MOVE"]]></Property>
</HtmlView.Element>
<HtmlView.Element>
<Type>Elements.Panel</Type>
<Name><![CDATA[instructionPanel]]></Name>
<Property name="Html"><![CDATA[<h1 style="font-size: 2em !important; padding-left: 0;">Card Matching Game</h1>
<h2>Instructions</h2>
<p>As part of the LSS Syllabus, Secondary 1 students are expected to learn 
the following about the Globally Harmonised System (GHS). This application 
aims to make learning about lab safety more enjoyable and interesting for 
students.
<br /><br />
This is a simple memory-match game.
<br />
<ul style="text-align: left;">
  <li>
    18 cards (9 symbol cards, 9 explanation cards) are faced down randomly 
    on the play-space
  </li>
  <li>
    Students click on two cards and if they match, they get a point.
  </li>
  <li>
    If they don’t match, the student has to try again to pick
    a correct pair
  </li>
  <li>
    They continue doing this until all 9 pairs are successfully match
  </li>
</ul>
There are also <b>2 different modes</b> students can choose from:
<ul style="text-align: left:">
  <li> 
    The first is the easy mode, where the cards are <b>covered initially</b>, 
    but when the game starts, the cards are shown throughout the duration of 
    the game
  </li>
  <li>
    The second is the hard mode, where the cards are <b>shown initially</b>, but 
    when the game starts, the cards are covered throughout the duration the game 
  </li>
</ul>
Note that you are <b>not allowed</b> to change the mode during the game.
</p>]]></Property>
</HtmlView.Element>
</Tree>
</Content>
</Osejs.HtmlView.Page>
</Osejs.HtmlView>
</Osejs>
