Breadcrumbs

 

 

 

Download ModelDownload SourceembedLaunch Website ES WebEJS

Translations

Code Language Translator Run

Credits

This email address is being protected from spambots. You need JavaScript enabled to view it.; Francisco Esquembre; Felix J. Garcia Clemente

  1. Main Themes and Important Ideas:

    1. Utilizing the OSP@SG Digital Library and EJSS Editor:
    • The tutorial highlights the availability of a vast library of over 500 simulations and games within the Open Source Physics @ Singapore (OSP@SG) digital library.
    • Crucially, it emphasizes the open-source nature of these resources, allowing users to download source code, modify it using the EJSS editor, and incorporate features into their own projects.
    • Quote: "The OSP@SG digital library has +500 simulations and games and anyone can download the source code, unzip it into the workspace source folder and open it with EJSS editor to continue working on it or copy out features that you want into another copy of EJSS editor."
    • The tutorial also advises on running two instances of the EJSS editor for easier feature copying.
    1. Leveraging Templates for Quick Development:
    • The tutorial advocates using a generic starter file ("my template") that includes basic play/pause/reset buttons and a plotting panel to expedite the game creation process.
    • Quote: "for quick making, let use my template, a generic starter file with a basic play pause reset buttons and a single plottingPanel,"
    • Instructions are provided to download and integrate this template into the EJSS workspace.
    1. Step-by-Step Guide to Building the Matching Game:
    • The tutorial provides a detailed, step-by-step process for creating the game, covering key aspects:
    • Setting up the Card Grid: Defining variables for screen boundaries, card dimensions, and initial positions.
    • Creating Visual Cards: Using ShapeSets in the EJSS HTMLView to represent the cards. Properties like size, position, and interactivity are configured.
    • Adding Interactivity: Utilizing the objectinteracted variable and the elementInteracted property of the ShapeSet to detect which card is selected. Enabling the ENABLED_NO_MOVE setting for interactivity without allowing repositioning.
    • Debugging with Text: Employing TextSets to display variable values for debugging purposes.
    • Duplicating Elements: Efficiently creating the second set of matching cards by copying and pasting variables and ShapeSets in the EJSS Model and HTMLView, respectively, and adjusting their properties (e.g., y-position).
    • Adding Images: Incorporating images for the matching pairs using imageSets and controlling their visibility based on user interaction.
    • Implementing Click Logic: Using the onPress event of the ShapeSet to toggle the visibility of corresponding images.
    1. Implementing Scoring and Game Logic:
    • A score variable is introduced to track correct matches.
    • The onRelease event of the second ShapeSet implements the core game logic:
    • Checking if the objectinteracted values of the two clicked cards match.
    • Incrementing the score for a correct match and providing a "correct!" dialog.
    • Hiding the matched cards (shapes and images).
    • Displaying a "try again!" dialog for an incorrect match and hiding the images.
    • Quote (example of game logic):if (objectinteracted==objectinteracted2){
    • score=score+1;
    • _tools.showOkDialog("correct!", function() {
    • // ... (hiding logic) ...
    • });
    • }
    • else {
    • score = score;
    • _tools.showOkDialog("try again!", function() {
    • // ... (hiding logic) ...
    • });
    • }
    • Implementing an end-of-game condition when the score reaches a certain value (4 in this example), displaying a "end of game" dialog and pausing the game.
    1. Adding Instructions and Styling:
    • The tutorial demonstrates how to add an introductory dialog using _tools.showOkDialog() within the Model's Initialization section.
    • It also provides basic JavaScript code snippets to customize the styling (font size, color, background color, width, margin, top position) of the dialog box using document.getElementById(".myBoxPanelOk").style.
    1. Creating Multiple Screens/Panels:
    • The tutorial introduces the concept of using multiple plottingPanel elements to create different "screens" within the game.
    • It utilizes boolean variables (world, graph) and the Display property of the plottingPanel (using CSS syntax "inline" and "none") to control the visibility of these panels based on the game state.
    • A stepButton's onClick event is used as an example to transition between these panels.
    1. Availability of Source Code and Embedding:
    • The tutorial explicitly provides a link to download the complete source code of the "complimentarymatchproteinv2" game.
    • It also shows how to embed the created game into a webpage using an iframe tag.
    • Quote (embedding):<iframe width="100%" height="100%" src="https://iwant2study.org/lookangejss/biology/ejss_model_complimentarymatchproteinv2/complimentarymatchproteinv2_Simulation.xhtml " frameborder="0"></iframe>

    Key Facts:

    • The tutorial was created for the SLS Hackathon 2019.
    • It utilizes the Easy JavaScript Simulations (EJSS) authoring tool.
    • The target platform for deployment is HTML5, making the game accessible through web browsers.
    • The example game focuses on a 4x2 matching card layout.
    • The tutorial demonstrates basic game mechanics, scoring, and user interface elements.
    • The OSP@SG digital library offers a wealth of pre-built simulations and games that can be used as learning resources and development starting points.

    Implications:

    This tutorial provides a practical and accessible entry point for educators and developers looking to create interactive learning games for the Singapore Student Learning Space. By leveraging the EJSS environment and existing templates, the development process can be significantly accelerated. The focus on open educational resources encourages sharing and collaboration within the educational community. The techniques demonstrated can be adapted and expanded upon to create more complex and engaging educational games

 

Study Guide: SLS Hackathon Tutorial - Matching Card Game in HTML5

Overview

This study guide is designed to help you review the concepts and steps involved in creating a matching card game using the Easy JavaScript Simulations (EJSS) editor, as outlined in the provided tutorial. It covers setting up the basic structure, adding interactivity, handling scoring, incorporating images, and managing game states.

Key Concepts

  • EJSS Editor: The software used to create interactive simulations and games using JavaScript and HTML5.
  • Workspace: The designated folder where EJSS projects and their associated files are stored.
  • Simulation: The interactive program created within EJSS.
  • HTMLView: The part of the EJSS editor used to design the visual elements of the simulation.
  • Model: The part of the EJSS editor used to define the underlying logic, variables, and code of the simulation.
  • Variables: Named storage locations in the Model that hold data used in the simulation (e.g., score, card positions, visibility).
  • ShapeSets: Visual elements created in the HTMLView, often used to represent interactive objects like cards.
  • ImageSets: Visual elements in the HTMLView used to display images.
  • TextSets: Visual elements in the HTMLView used to display text.
  • PlottingPanel: A container in the HTMLView used to display graphical elements like ShapeSets, ImageSets, and TextSets.
  • Properties: Attributes of elements in the HTMLView (e.g., SizeX, SizeY, Text, Visibility, OnPress, OnRelease) that can be configured and linked to Model variables.
  • Event Handling (OnPress, OnRelease): Actions or code that are executed when a user interacts with an element (e.g., clicking or releasing the mouse button).
  • Debugging: The process of identifying and fixing errors in the simulation's logic or visual presentation.
  • Visibility: A property that controls whether an element in the HTMLView is displayed or hidden.
  • Scoring: The mechanism for tracking the player's progress, typically increasing for correct matches and potentially decreasing for incorrect ones.
  • Game States: Different phases or conditions of the game, such as the initial instruction screen or the main gameplay area.
  • Display Property (CSS): A style attribute used to control the rendering of HTML elements (e.g., "inline" to show, "none" to hide).

Detailed Steps Review

  • Setting up the EJSS Environment:Understanding the OSP@SG digital library and its resources.
  • Downloading source code and using the EJSS editor.
  • Launching multiple instances of the EJSS editor.
  • Creating the Basic Card Layout:Using a template file as a starting point.
  • Defining variables for screen boundaries (xmin, xmax, ymin, ymax).
  • Defining variables for card dimensions and positioning (n, ns, nstore, xcell, ycell, cellsizex, cellsizey).
  • Adding ShapeSets to the plottingPanel in the HTMLView.
  • Configuring the properties of the ShapeSets.
  • Running the simulation to preview the initial card layout.
  • Implementing Interactivity:Adding the objectinteracted variable in the Model to track selected cards.
  • Linking objectinteracted to the elementInteracted property of the ShapeSet in the HTMLView.
  • Setting the Sensitivity of the ShapeSet to 0 to make the entire shape interactive.
  • Setting EnabledPosition to "ENABLED_NO_MOVE" to allow interaction without repositioning.
  • Adding Debugging Tools:Adding a textSet named "numbers" in the HTMLView.
  • Adding a text variable in the Model.
  • Linking the Text property of the textSet to the text variable and setting the font size for debugging display.
  • Duplicating Cards for Matching:Copying and pasting variables in the Model and renaming them with a "2" suffix.
  • Copying and pasting ShapeSets and TextSets in the HTMLView.
  • Updating the properties of the duplicated elements (e.g., linking to the new variables, adjusting positions using ycell2).
  • Incorporating Images:Finding and downloading images for the matching pairs.
  • Creating an imageUrl variable (with n dimensions) in the Model to store image paths.
  • Using the Model - Initialization section to assign image paths to the imageUrl array.
  • Adding a new imageSet to the HTMLView.
  • Setting the properties of the imageSet to display the images based on the imageUrl variable.
  • Controlling Image Visibility on Interaction:Adding a visibility variable (with n dimensions) in the Model initialized to false.
  • Linking the Visibility property of the imageSet to the visibility variable.
  • Using the OnPress event of the shapeSet to set the corresponding visibility array element to true when a card is clicked.
  • Duplicating the visibility logic for the second set of cards (variables visibility2, objectinteracted2, imageSet2, shapeSet2).
  • Implementing Scoring and Match Checking:Adding a score variable in the Model.
  • Using the OnRelease event of shapeSet2 to check if the objectinteracted (first clicked card) matches objectinteracted2 (second clicked card).
  • Incrementing the score for a correct match and displaying a "correct!" dialog.
  • Implementing logic to hide the matched cards (setting visibility and visibility2 to false).
  • Adding logic to display a "try again!" dialog and reset visibility for incorrect matches.
  • Implementing an end-of-game condition when the score reaches the total number of matches (4 in this example).
  • Adding Instructions:Creating a new page in Model - Initialization named "introduction".
  • Using the _tools.showOkDialog() method to display instructions at the start of the game.
  • Customizing the appearance of the dialog box using HTML and CSS within the _tools.showOkDialog() method.
  • Managing Game States with Plotting Panels:Adding a second plottingPanel2 in the HTMLView.
  • Introducing boolean variables (world, graph) in the Model to represent different game states.
  • Setting the initial value of graph to false.
  • Using the Display property of plottingPanel and plottingPanel2 to show or hide them based on the world and graph variables using ternary operators (world?"inline":"none").
  • Using a stepButton's OnClick event to toggle the world and graph variables and effectively switch between the card game panel and a potential new panel.
  • Adding the same display-changing code to the OnRelease event of shapeSet2 to transition to plottingPanel2 after a correct match.

Quiz

Answer the following questions in 2-3 sentences each.

  1. What is the primary purpose of the EJSS editor as described in the tutorial?
  2. Explain the difference between the HTMLView and the Model within the EJSS editor in the context of this tutorial.
  3. Why is it important to define variables like xmin, xmax, ymin, and ymax when creating the card game layout?
  4. What role does the objectinteracted variable play in making the cards interactive in this matching game?
  5. Describe the process of duplicating elements (variables and ShapeSets) and why this is necessary for creating a matching game.
  6. How are images incorporated into the matching cards, and what variable is used to manage their file paths?
  7. Explain how the visibility variable and the OnPress event are used to reveal images when a card is clicked.
  8. What logic is implemented within the OnRelease event to determine if two selected cards are a match and to update the score?
  9. How is the _tools.showOkDialog() method used in this tutorial, and for what purposes?
  10. How are different game states or screens (like the initial instructions and the main game) managed using multiple plottingPanel elements and boolean variables?

Quiz Answer Key

  1. The EJSS editor is primarily used to create interactive simulations and games using JavaScript and HTML5. It allows users to visually design the interface and define the underlying logic through variables and code.
  2. The HTMLView in EJSS is where the visual elements of the simulation, such as cards (using ShapeSets), images (ImageSets), and text (TextSets), are created and arranged. The Model is where the underlying data, variables, and the code that controls the behavior and logic of the simulation are defined.
  3. Variables like xmin, xmax, ymin, and ymax define the boundaries of the screen or the plotting area. They are important for positioning the cards correctly and ensuring they are displayed within the visible area of the simulation.
  4. The objectinteracted variable in the Model stores information about which interactive element (card) has been clicked by the user. This allows the simulation to identify the selected card and trigger subsequent actions based on that selection.
  5. Duplicating variables and ShapeSets is necessary to create pairs of matching cards. By duplicating and then modifying the properties (like position and associated image), the game can have two sets of cards that can be matched together.
  6. Images are incorporated using the imageUrl variable in the Model, which stores the file paths to the image files. An imageSet element is added in the HTMLView, and its properties are linked to the imageUrl variable to display the corresponding images on the cards.
  7. The visibility variable (a boolean) controls whether an imageSet is displayed or hidden. When a shapeSet (representing a card) is pressed (using the OnPress event), the corresponding element in the visibility array is set to true, making the associated image visible.
  8. Within the OnRelease event of the second clicked card's shapeSet, the simulation compares the objectinteracted values of the first and second clicks. If they match, the score is incremented, and a "correct!" dialog is shown, followed by hiding the matched cards.
  9. The _tools.showOkDialog() method is used to display pop-up dialog boxes to the user. In this tutorial, it is used to provide initial instructions at the beginning of the game and to give feedback to the player upon making a correct or incorrect match, as well as at the end of the game.
  10. Different game states are managed by using multiple plottingPanel elements in the HTMLView and boolean variables (world, graph) in the Model. The Display property of each plottingPanel is linked to these boolean variables, allowing the simulation to show or hide different panels based on the current game state.

Essay Format Questions

  1. Discuss the importance of event handling (specifically OnPress and OnRelease) in creating an interactive matching card game using EJSS, providing examples from the tutorial.
  2. Explain how variables in the Model and properties of elements in the HTMLView are interconnected to create the functionality of the matching card game described in the tutorial.
  3. Analyze the steps involved in incorporating visual elements (shapes and images) and controlling their visibility to create the interactive card display in the EJSS game.
  4. Describe the logic implemented for scoring and determining a match in the card game, and discuss how user feedback is provided through dialog boxes.
  5. Evaluate the techniques used in the tutorial to manage different stages or displays within the game, such as the initial instructions and the main gameplay, using multiple plottingPanel elements.

Glossary of Key Terms

  • EJSS (Easy JavaScript Simulations): A free authoring tool that allows users with little or no programming experience to create interactive science and mathematics simulations in JavaScript that run on web browsers and tablets.
  • HTML5: The latest evolution of the standard defining HTML, used for structuring and presenting content on the World Wide Web. It includes features for multimedia without needing plugins.
  • JavaScript: A high-level, often just-in-time compiled language that conforms to the ECMAScript specification. It is a programming language that is one of the core technologies of the World Wide Web, primarily used on the client-side to make web pages interactive.
  • Open Educational Resources (OER): Teaching, learning, and research materials that are freely available for everyone to use, adapt, and share.
  • Open Source Physics (OSP): A project that promotes the use and development of open-source computational tools for physics education.
  • Simulation: A computer program that models a real or imagined system to demonstrate its behavior. In this context, an interactive program that users can manipulate.
  • Variable: A named storage location in a computer's memory that holds a value. In EJSS, variables in the Model store data that the simulation uses and can change during the simulation.
  • Event: An action or occurrence recognized by a software program, such as a user clicking a mouse button (OnPress, OnRelease).
  • Property: An attribute or characteristic of an object or element that can be set or modified (e.g., size, position, color, visibility).
  • Boolean: A data type with only two possible values: true or false. Often used to control conditions or visibility in programming.
  • CSS (Cascading Style Sheets): A style sheet language used for describing the presentation of a document written in a markup language like HTML. Used here to style the instruction dialog box.
  • Ternary Operator: A shorthand way of writing conditional statements (if-else) in many programming languages, often represented as condition ? value_if_true : value_if_false. Used in the Display property.
  • Dialog Box: A small window that appears on the screen to present information to the user or to request input. In EJSS, created using _tools.showOkDialog().

Tutorial

SLS Hackathon Tutorial on Matching Game

 

 

  1. The OSP@SG digital library has +500 simulations and games and anyone can download the source code, unzip it into the workspace source folder and open it with EJSS editor to continue working on it or copy out features that you want into another copy of EJSS editor. to have 2 copies of EJSS editors,  click on the Launch EjsS on the EjsS console

    and open the source file
  2. so let say to create a matching game say 4 cards match to the lower 4 cards and if correct, score is increase by 1 and wrong score decrease by 0.5.
  3. for quick making, let use my template, a generic starter file with a basic play pause reset buttons and a single plottingPanel,

    click this to download it https://sg.iwant2study.org/ospsg/index.php/translations/858-ejss-model-lookangtemplatesls and unzip it and copy the folder to the workspace  
  4. my copy is in my /Users/lookang/Google Drive/PublicLawrence/workspace/source/EJSS/biology/complimentarymatchprotein.ejss and i rename it as complimentarymatchprotein.ejss 

  5.  create these variables need to make the first 4 cards at the top row, xmin, xmax,ymin and ymax are the screen size boundaries, n is a dimension, ns or n store is for storing n values initially in just i need to recall the n initial value later on, xcell y cell are position of cards, cellsizex and cellsizey and sizes of cards

  6. go to HtmlView -2D Drawables - Sets - ShapeSets 

    and drag and drop onto the plottingPanel

  7. double click on the shapeSet and add the properties into the respective fields

  8. click on the green button run Simulation

    to generate the simulation, previewing on Chrome is recommended 

  9. as the simulation is interactive via touch on screen, and EJSS provides a way to know what variable or card is selected, go to Model - Variables - and add objectinteracted 

  10. go to HtmlView - shapeSet - elementInteracted and add objectinteracted to the field and Sensitivity add 0 to hotspot the whole shapeSet SizeX and SizeY. adding a normal number will be understood as pixel size. EnabledPosition set to "ENABLED_NO_MOVE" to turn on the interactivity but don't allow them to be reposition 

  11. for debugging purposes add a textSet, rename it as numbers, 
  12. go to Model -Variables - and add text 

  13. go to HtmlView - numbers and double click to pop up the properties and add Text as %text% and Font as "normal normal 80px " to make the numbers really big 

  14. run the simulation and Chrome will show this 

  15. to duplicate the cards for the lower set, need to intelligently duplicate the variables and shapSets, on the Model - Variables -Var Table right click and select copy

  16.  and paste 

  17. the pink background suggest EJSS editor detects a potential problem
  18. and rename the new variables by adding a 2 

  19. run the simulation to check and there should be no problem
  20. go to HtmlView - shapeSet and right click and select copy

    and paste
  21. double click on the new shapeSet2 and add 2 to all the relevant fields 

  22. go to Model - Variables - Var Table ycell2 and add -3 to lower the position 

  23. run the simulation 

  24. duplicate the same for numbers2 

  25. run the simulation 
  26. let say rice and baked beans picture as set to 1 and when clicked on the picture will overlap on top of the card space. go google and look for pictures of rice and baked beans https://www.google.com/search?q=rice&tbm=isch&source=lnt&tbs=sur:fmc&sa=X&ved=0ahUKEwiLpOiRx7jhAhXo7XMBHWodBCgQpwUIIQ&biw=1745&bih=836&dpr=1.1

  27. or you can just download this and copy into the workspace folder associated with the source file

    rice


    baked beans

  28. for me, the path is /Users/lookang/Google Drive/PublicLawrence/workspace/source/EJSS/biology/lookangtemplateSLS 

  29. go to Model - Variables - Var Table and add imageUrl , initial value as "" of n dimensions 

  30. at Model - Initialization create a new page and add the following code. As a test of the code, i just want to turn on imageUrl[0] on the first card.

    • imageUrl[0]="./lookangtemplateSLS/Screenshot 2019-04-05 at 4.39.07 PM.png";
    • // add the rest of the imageUrl yourself
    • //imageUrl[1]="./lookangtemplateSLS/Screenshot 2019-04-05 at 4.39.07 PM.png";
    • //imageUrl[2]="./lookangtemplateSLS/Screenshot 2019-04-05 at 4.39.07 PM.png";
    • //imageUrl[3]="./lookangtemplateSLS/Screenshot 2019-04-05 at 4.39.07 PM.png";
  31. go to HtmlView - add a new imageSet from the 2D drawables and add these properties

  32. run the simulation to test the new effects, the new rice picture should appear

  33. the idea here is to click on the box 1 and it turns the visibility of the imageSet to true. go to Model - Variables - Var Table and add visibility and initial value as false and on n dimensions 

  34. go to HtmlView - imageSet and double click on it to pop up the properties and add Visibility as visibility which controls what to show up

  35. next go to HtmlView - shapeSet and double click on it and edit the properties onPress using this code
    • visibility[objectinteracted]=true;
  36. run the simulation to test, the rice should appear only after the box 1 is press on. 

  37. duplicate the variables for the bottom box 1 baked beans, Model - Variables - copy and add 2 to the back on the names for ease of creation. 

  38. Htmlview - copy and paste the imageSet and rename all the variables with the postfix 2

    This document provides a briefing on a tutorial for creating a simple matching card game using HTML5 within the Easy JavaScript Simulations (EJSS) environment, specifically targeted towards the Singapore Student Learning Space (SLS) Hackathon in 2019. The tutorial guides users through the process of building a game where the player needs to match pairs of cards, with scoring and basic game flow. The content emphasizes leveraging existing EJSS features and templates for rapid development.

     

NotebookLM can be inaccurate; please double check its responses.
  1. do the same for shapeSet2 by adding this code on the OnPress 

    • visibility2[objectinteracted2]=true;
  2. run the simulation and click on the bottom box 1 

  3. after getting the correct set box 1 top and box 1 bottom, make the box and image disappear after checking for accuracy. create visibilityshape and visibilityshape2 as shown 
  4. go to HtmlView- shapeSet - properties - Visibility as set it as visibilityshape 
  5. go to HtmlView- numbers - properties - Visibility as set it as visibilityshape 
  6. go to HtmlView- shapeSet - properties - Visibility as set it as visibilityshape2 
  7. go to HtmlView- numbers2 - properties - Visibility as set it as visibilityshape2
  8. the above should prepare the boolean to control the true/false of the visibility state of the shapeSet, textSet and imageSet.
  9. let introduce a variable called score, do you still remember how to do that? hint below in picture

  10. the code template is below copy and paste into the HtmlView - shapeSet2 - OnRelease 

    • if (objectinteracted==objectinteracted2){
    •   score=score+1;
    •   _tools.showOkDialog("correct!", function() {
    •   //  alert("correct!");
    •   visibility[objectinteracted]=false; //make picture disappear
    •   visibility2[objectinteracted2]=false;
    •     visibilityshape[objectinteracted]=false; //make shape disappear
    •   visibilityshape2[objectinteracted2]=false;
    •   _update(); // force EJSS to update the simulation view
    •   
    •   if (score==4){
    •   _tools.showOkDialog("end of game, click reset to play again",function() {
    •      _pause();
    •      _update(); // force EJSS to update the simulation view
    •      });
    •   }
    •   });
    •   }
    •   else {
    •     score = score;
    •     _tools.showOkDialog("try again!", function() {
    •       visibility[objectinteracted]=false;
    •   visibility2[objectinteracted2]=false;
    •      _update(); // force EJSS to update the simulation view
    •      });
    •     }
  11. the run simulation at the clicking on box 1 and 1 

  12. when score==4

  13. adding instruction at the beginning can be achieve, go to Model - Initialization - create a new page 

  14. name it introduction 

  15. right click on the field and select Methods - Tool methods - 

  16. select _tools.showOkDialog();

  17. add your text inside the () 

    • _tools.showOkDialog("Pairing the Complementary Match. Pair up the correct set of cards. Click on the cards to continue. ");
  18. the run simulation will look like this

  19. sometimes, you might want to change the style of this myBoxPanelOk, and copy this and edit it to suit your preference 

    • //_tools.showOkDialog("<p style='font-size:2vw; color:black'>"+"Pairing the Complementary Match. <br/>Pair up the correct set of cards. <br/>Click on the cards to continue. "+"</p>");
    • _tools.showOkDialog("Pairing the Complementary Match. <br/>Pair up the correct set of cards. <br/>Click on the cards to continue. ");
    • document.getElementById(".myBoxPanelOk").style.fontSize = "2vw";
    • //document.getElementById(".myBoxPanelOk").style.color = "black";
    • //document.getElementById(".myBoxPanelOk").style.backgroundColor = "rgb(255,120,120)";
    • document.getElementById(".myBoxPanelOk").style.width = "30%";
    • document.getElementById(".myBoxPanelOk").style.marginLeft = "-15%";
    • document.getElementById(".myBoxPanelOk").style.top = "0";
    • //alert("aaaaa");
    • //prompt("b");
    • document.getElementById(".myBoxPanelOk.okbt").style.fontSize = "2vmax";// increase ok button font
  20. run the simulation to check

  21. sometimes, you may want a new panel with pictures that it would be difficult to do with myBoxPanelOk.
  22. let do another plottingPanel2 and use Display to control whether is is "inline" and "none"
  23. go to HtmlView - Interface - second tab look for plottingPanel and add it to the panel below the first plottingPanel 

  24. a new plottingPanel2 is now added 

  25. so let say immediately after clicking the correct set, we Display "none" for plottingPanel and Display "inline" for plottingPanel2 to create the illusion of moving to a new slide.
  26. in the template, i already have added world and graph boolean that can served as states to control when to display which plottingPanels 

  27. change the initial value of graph to false

  28. in HtmlView - plottingPanel  - Properties - Display and Width and add these code. the first code check the state of variable world if true do "inline" if false do "none". These are CSS syntax to control the display of the plottingPanel

    • world?"inline":"none"
    • Width1
  29. similarly, HtmlView - plottingPanel2  - Properties - Display and Width and Height and add these code. The height is added with %% to force EJSS editor to accept this as variable and changeOrientation() is a custom function to make the Height as big as possible dynamically on different platforms

    • graph?"inline":"none"
    • Width2
    • %changeOrientation()%
  30. i will use the step button as a way to go back to card game plottingPanel , go to HtmlView - stepButton -  OnClick. the variables graph control display of plottingPanel2 and world plottingPanel and Width1 as plottingPanel and Width2 as plottingPanel2
    • graph=false;
    • world=true;
    • Width1="100%";
    • Width2="0%";
  31. also go to HtmlView - shapeSet2 - properties - OnRelease add the same code as the position on the screenshot. so that immediately after getting the same number boxes correctly, the display changing to just plottingPanel2 and hide plottingPanel

  32. run the simulation to test 

  33. after clicking 3 n 3, the plottingPanel2 should appear in the main view

  34. click step the plottingPanel is the main view

  35. this template should help anyone interested to continue to work on it as it has the basic function of a matching card game 
  36. https://sg.iwant2study.org/ospsg/index.php/interactive-resources/biology/859-complimentarymatchproteinv2 get the source code there
  37. embed code 

For Teachers

[text]

Research

[text]

Video

[text]

 Version:

Other Resources

[text]

Frequently Asked Questions about Creating a Matching Card Game with EJSS

  • What is the purpose of this tutorial? This tutorial provides a step-by-step guide on how to create a simple matching card game using the Easy JavaScript Simulations (EJSS) editor, specifically for the Singapore Student Learning Space (SLS) Hackathon. It focuses on the fundamental steps involved in setting up the game interface, defining interactive elements, and implementing basic game logic such as scoring and win conditions.
  • What are the basic steps to create the card game structure in EJSS? The initial steps involve downloading a basic EJSS template, defining variables for screen boundaries and card dimensions, and creating visual representations of the cards using ShapeSets in the HTMLView. Properties such as position and size are configured for these shapes. Enabling interactivity without movement is achieved by adjusting the elementInteracted and Sensitivity properties, and setting EnabledPosition to "ENABLED_NO_MOVE".
  • How are the pairs of cards and their corresponding images implemented? To create matching pairs, variables and ShapeSets are duplicated and renamed with a numerical suffix (e.g., xmin2, shapeSet2). Their positions are adjusted to create a second set of cards. Images are added using ImageSets, and their visibility is initially set to false. A variable like imageUrl stores the paths to the image files. The onPress event of the top cards is programmed to set the visibility of the corresponding image to true, revealing the picture when a card is clicked.
  • How is the scoring system implemented in this game? A variable named score is introduced. The game logic to increase the score for a correct match and potentially decrease it for an incorrect match is implemented within the onRelease event of the second set of cards. An if condition checks if the objectinteracted (the first clicked card) is the same as objectinteracted2 (the second clicked card). If they match, the score increases, and a "correct!" dialog appears, followed by the disappearance of the matched cards.
  • How does the game indicate a correct or incorrect match to the user? Upon releasing the click on a card in the second set, the onRelease event code compares the objectinteracted and objectinteracted2 variables. If they are equal, a dialog box appears displaying "correct!". If they are not equal, a "try again!" dialog is shown. In both cases, the visibility of the revealed images is set back to false after the dialog is acknowledged, effectively hiding them again for the next attempt.
  • How is the end of the game and the reset functionality handled? Within the scoring logic, another if condition checks if the score reaches a predetermined value (e.g., 4 for four matching pairs). If the score equals this value, an "end of game" dialog is displayed, and the game is paused using _pause(). A reset button (part of the basic template) would typically be used to reset the score and the visibility of all cards and images to their initial states, allowing the user to play again.
  • How can introductory instructions or additional panels be added to the game? Introductory instructions can be added by creating a new initialization page in the Model section and using the _tools.showOkDialog() method to display a message at the start of the simulation. Additional panels can be created in the HTMLView using plottingPanel elements. The visibility of these panels can be controlled using boolean variables (e.g., world, graph) and their Display property, allowing for transitions between different views within the simulation.
  • Where can I find the source code for this matching card game template and other EJSS resources? The source code for the complementary matching protein game template can be downloaded from the provided link: https://sg.iwant2study.org/ospsg/index.php/interactive-resources/biology/859-complimentarymatchproteinv2. The Open Educational Resources / Open Source Physics @ Singapore digital library contains over 500 simulations and games, with source code available for download and modification using the EJSS editor.
2 1 1 1 1 1 1 1 1 1 1 Rating 2.00 (1 Vote)