Creating a Website Scoring for High-Order Thinking Skills Game

Creating a Website Scoring for High-Order Thinking Skills Game

Volume 5, Issue 5, Page No 382-388, 2020

Author’s Name: Yogi Udjaja1,a), Sasmoko2, Jurike V.Moniaga1, Millionsen Christ Lo1

View Affiliations

1Computer Science Department, School of Computer Science, Bina Nusantara University, Jakarta, 11480, Indonesia
2Primary Teacher Education Department, Faculty of Humanities, Bina Nusantara University, Jakarta, 11480, Indonesia

a)Author to whom correspondence should be addressed. E-mail: yogi.udjaja@binus.ac.id

Adv. Sci. Technol. Eng. Syst. J. 5(5), 382-388 (2020); a  DOI: 10.25046/aj050548

Keywords: Website Scoring, HOTS Game, Website Development

Share
429 Downloads

Export Citations

There have been many activities to train the brain to remain active, one of its activities is by playing games. Games with the right presentation can train the brain as a whole. This research is focused on High-Order Thinking Skills (HOTS) in order to be able to train the brain’s ability in players. Can be concluded that the Web scoreboard with Hypertext Prepocessor (PHP) and Structured Query Language (SQL) has been successfully developed. Web consists of three main menus namely the home menu, score menu, contact menu. unity code accessed to a web page to get data from a web server. This is a simple module for retrieving URL data.

Received: 27 March 2020, Accepted: 24 June 2020, Published Online: 21 September 2020

1. Introduction

This is a quiz game focused on children which is a math problem that contains Creativity, Critical Thinking, and Problem Solving with the aim of helping develop and improve their skills. The player’s character is a man seeking wealth in 3 regions of Indonesia, and each region will display cultures in their respective regions. To do that the character must solve the puzzle in each region that will give players direction to treasure.

This is one type of media used in providing teaching in the form of games with the aim of stimulating thinking power and increasing concentration through unique and interesting media. This understanding of course identifies that educational games aim to support the teaching and learning process with activities that are fun and more creative. Therefore, the game that is made must have features that are interesting and easy to understand so that players do not get bored easily and have difficulty in running the game. Because this game is made so that players can learn while playing

Now the HOTS game really needs a scoreboard because many players can see the score after playing to see how much value the player get. Therefore the idea came up with making a scoreboard on the website using the php programming language and the SQL database language. Games are very useful if used positively, such as games that function as edutainment media, for example media that distribute not education with entertainment or often called playing while learning. Then the researchers are interested in building an Android-based learning game for young children. Educational games allow for repeated drill and practice with nearly immediate feedback. In this type of games, facts are practiced over and over, but often in the context of an imaginary world, narrative, plot, or goal [1].

Games that are packaged simply and attractively are expected to be useful as an educational media that is educative for children, and can be an alternative medium for teachers and parents in stimulating children’s creativity and fostering a child’s passion for “learning while playing” early on interesting, fun, effective so that the child still gets joy when learning. The purpose of this research is to produce a game-based learning application [2].

2. Related Research

2.1. Game

The game is a problem solving activity, approached with a pleasant attitude, the game is also something we play and find pleasure in playing it [3 – 4]. A good game is a game that can make users actively participate and have the right amount of challenges, not too little or too much [5].

The attitude of people when playing a game, can be different from the person who is not playing a game, because when the person is playing a game then player will feel as if he is in the “world” that the game created [6]. The game certainly provides problems and challenges to be faced by players, if the game does not provide a challenge then the game will be less fun to play. The game also provides a destination for the user, so the user has a goal in playing the game, if the game has no goals maybe the players will find that the game is boring [7].

In describing films or books, the term genre refers to the content of the work while in the game genre refers to the type of challenge that the game offers. In games, genre does not depend on content. An example of such a genre is “Puzzle Games”, Specifically a frequently used puzzle game in these studies is Tetris. Arguably, the main cognitive demand in this game is mental rotation and spatial visualization [8].

2.2. MySQL

MySQL was originally created in 1979, by Michael “Monty” Widenius, David Axmark, and Allan Larson. The three of them later founded a company called MySQL AB in Sweden.

My Structured Query Language (MySQL) version 1.0 was released in May 1996 and its use was only limited among internal users. In October 1996, MySQL version 3.11.0 was released to the general public under an “Open but limited” license. With this license, anyone can view the original program and use the MySQL server for free for non-commercial activities. However, for commercial activities, the license must be paid.

MySQL is a Relational Database Management System (RDMS) that is fast and easy to use for various needs. Each user can freely use MySQL, but with the limitations that the software may not be used as a derivative product that is commercial. MySQL is actually a derivative of one of the main concepts in a pre-existing database. SQL (Structured Query Language) is a database operation concept, especially for the selection or selection and entry of data, which allows data operations to be done easily automatically [9].

1.) Make Table

Algorithm 1: Table structure

1.       Create TABLE people (

2.        SELECT

3.       DECLARE AN INTEGER CALLED NOT NULL  AUTO_INCREMENT,

4.       SET NAMA VARCHAR LENGTH 50,

5.       DECLARE AN INTEGER CALLED Kalimantan,

6.       DECLARE AN INTEGER CALLED Sulawesi,

7.       DECLARE AN INTEGER CALLED Papua,

8.       DECLARE AN INTEGER CALLED Score,

) ;

This is the sql table of the game hots in phpmyadmin when creating a table.

2.) Display Data

The command to display data stored in the table can be done with the command “select”.

Example: “SELECT * from people;”.

2.3. Hypertext Preprocessor

Hypertext Preprocessor (PHP) stands for PHP Hypertext Preprocessor, it is a scripting language that is placed on the server. The results of PHP are sent to the client where the user uses a browser. Specifically PHP is designed to form dynamic web applications. That is, it can form a view based on the latest requests. In principle, PHP has the same function as ASP (Active Server Page), Cold Fusion, or Perl. [10].

PHP is not limited to the output of HTML (HyperText Markup Language). PHP also has the ability to process images, PDF files, and flash movies. PHP can also produce text like XHTML and other XML files. One feature that can be relied on by PHP is its support for many databases, one of which is MySQL.

2.4. XAMPP

XAMPP is a web server software that can be used to accommodate the operating systems that you use (X), Apache (A), MySQL (M), PHP (P) and Perl (P) [11]. By installing XAMPP, you don’t need to install the application server one by one because in XAMPP already has:

1.) Apache + open SSL

2.) MariaDb + PBXT engine

3.) PHP

4.) PHPMyAdmin

5.) Perl

6.) Filezilla FTP Server

7.) Mercury Mail Transport System.

2.5. C#

C# is a new programming language created by Microsoft (developed under the leadership of Anders Hejlsberg who incidentally has also created a variety of programming languages including Borland Turbo C++ and Borland Delphi). The C# language has also been standardized internationally by ECMA [12].

2.6. UNITY

Unity is a cross-platform game engine developed by Unity Technologies. This software was first launched in 2005 and is one of the many game engines used by many professional game developers in the world. Unity is a game developer tool with integrated rendering capabilities in it. By using the sophistication of its features and also the high work speed, Unity can create an interactive program not only in 2 dimensions, but also in 3 dimensions.

This Unity 3D application is a game engine or a graphics processing software, images, sounds and others are used to create games. Although it can be published to various platforms, Unity needs a license to be published on certain platforms. But Unity provides free users and can be published in a standalone form. Features in Unity 3D [13]:

  1. Hierarchy Tab, the tab functions to enter objects that will be displayed in this game.
  1. Inspector Tab, a tab that functions to edit object properties that are clicked on the object component in the Hierarchy Tab, which is used to edit and add components to the object.
  2. Project Tab, contains all the ingredients that we will use in making games, where various components such as folders, images, object3D, assets, materials and others will be used.
  3. Console Tab, where the error message will appear in the project.
  4. Scene Tab, window that is used to build games,view,and manage object in a scene.
  5. Game Tab, where the game is being tested, can be run by clicking the play button.

2.7. The Scripting API

Although Unity ships with many built-in components, most games require additional game-specific behaviours.These behaviours can be implemented programmatically in special components called Scripts by using Unity’s Scripting API. Scripts can be written in either C#, JavaScript or Boo. In this implementation, all Scripts were written in C#. The Scripting API is an IoC (Inversion of Control) framework, which means that the Scripts written by developers can’t control the execution of the game. Rather, the developers have to implement certain methods in the Scripts and Unity will call those methods under certain conditions [14].

3. Research Method

3.1. Unity Sending Data to Server

Connect it using WWW in unity code accessed to a web page to get data from a web server. This is a simple module for retrieving URL data.

Figure 1: Architecture Transfer Data from Game to Website

3.2. Inserting Data into Database from Unity

Helper class to generate form data to post to web servers using the UnityWebRequest or WWW classes for api script. Create a new file to insert data by using the $ _POST Variable, taking the form data from unity:

Algorithm 2: WWWForm

1.       PROCEDURE SubmitAnswer ()

2.       BEGIN PROCEDURE

3.       RECEIVE DATA WWWForm (newWWWForm)

4.       SET FORM TO [“namaPost”,”kalimantanPost”,”sulawesiPost”,”papuaPost”,”skorPost”,]

5.       SEND CreateUserURL TO form

6.                  END PROCEDURE

All use $ _post with a string and take names, Kalimantan, Sulawesi, Papua, and scores. Its like telling php someone is going to post something from somewhere so, whatever php post with this id assign it in to string in step 1 (give data from unity) look at Figure 1 when processing Unity Game. Unity Game.Server-side PHP Script to handle POST and GET requests,two scenes with two scripts GET and POST attached to each scene and use C# scripts for sending GET and POST request,that’s the basic to make Unity C# communicates to PHP script.

3.3. Table Scoreboard Website

Website containing score table data that has 3 assessment columns, namely the Creativity, Critical Thinking, and Problem Solving columns. From the three columns will be automatically added to the score column. This creates a new php website file. To sort the data from the largest to the smallest using ORDER BY … DESC

Algorithm 3: WWWForm

1.       DECLARE @servername,

2.       DECLARE @server_username ,

3.       DECLARE @server_password ,

4.       DECLARE @dbName ,

5.       CONNECTION(@servername, @server_username, @server_password, @dbName);

6.       SHOW DATA FROM people SORT skor DESCENDING ORDER

It is necessary to determine if there is the same name so that there are no 2 same names here using IF ELSE. If there is the same name, then do an SQL update, If there is no same name then insert data using SQL insert like step 2 (write) look at Figure 1 connection from unity to scoreboard and sort the score from the largest to the smallest using ORDER BY … DESC.If there are more than zero rows returned,the function fetch_assoc() puts all the result into an associative array that can loop through.The while() loops through the result set and outputs the data from the no,nama,Kalimantan,Sulawesi,papua,and skor columns.

 Algorithm 4: Insert Name

1.          BEGIN

2.          SHOW DATA FROM people INCLUDE nama = ‘$nama'”;

3.          UPDATE DATA FROM people (Kalimantan,Sulawesi,Papua)EXCEPT nama

4.          ELSE

5.          SEND people TO (nama,kalimantan,sulawesi,papua,skor)

6.          END

From here it can be seen that an update and insert can be done as step 3(update data) look at figure 1 only if the name is the same will be updated automatically, not overrided. By using this it can also be used for websites even though they have been built in unity.

3.4. Make a Quiz

In the quiz there is an animated writing move up and down using anchored animation. There is also if true the phrase “congratulations you enter the next stage” will appear using animation.And to make the play button enter the main quiz by using the On Click. In the usernameAdd.SaveName section to fill in the player’s name and click the button to start the game look figure 2.

Figure 2: Button (Script)

3.5. Script Gameplay

For the gameplay part starts from void start to display the first time when you click on play.

 Algorithm 5:  Display Quiz Questions

1.       PROCEDURE tampil_soal()

2.       BEGIN PROCEDURE

3.       SEND urutan_soal  REPEAT

4.       SET  text_soal.text  TO DISPLAY SOAL

5.       END PROCEDURE

When the quiz question has been displayed, it is necessary use if else so that there are conditions where if it is true it will display an animated sentence and the score will increase by 1.

Algorithm 6: Gameplay.cs

1.       PROCEDURE void jawab()

2.       BEGIN PROCEDURE

3.       If LevelLocation <= 9

4.       THEN

5.       if  urutan_soal < soal.Length – 1

6.       THEN

7.       If input_jawaban.text = jawaban(urutan_soal)      Then

8.       feed_benar.SetActive(False)

9.       feed_benar.SetActive(True)

10.    feed_salah.SetActive(False)

11.    AddScore1()

12.    AddLoc()

13.    SubmitAnswer()

14.    input_jawaban.text = “”

15.    tampil_soal()

16.    Else

17.    feed_benar.SetActive(False)

18.    feed_salah.SetActive(False)

19.    feed_salah.SetActive(True)

20.    End If

21.    If True Then

22.

23.    If input_jawaban.text = jawaban(urutan_soal)                    Then AddScore1()

24.    End If

25.    End If

26.    End If

27.    End If

28.    End PROCEDURE

The answer can be true or false, when the first problem is finished then the animation will be reset to proceed to the next problem.Skor+- to increase the score when its True. Every time you answer there will be a value addition.tampil_soal()every time the “question” has been answered then the next “question” must be displayed.

3.6. Void Update

Example: text_skor.text = skor.ToString ();

Skor.ToString use to send numbers to the text that is a string for adding scores when you have solved the next problem in void update and display text scores in the upper right corner:

Algorithm 7: Send Number to the text

1.       Private Function update() As Void

2.        READ DATA skor.ToString()

3.        End Function

when the script has been created, the script will display like figure 3.

Figure 3: Gameplay (Script)

Drag “question” into “text_soal” the answers to “Input_jawaban, animation when False and True inserted into “Feed_benar” and “Feed_salah”. Processed again to be able to send all the data from the unity game can be displayed in the website menu.

 In Figure 1 after completing the game, then the unity script is sent to the MYSQL. MySQL can be stored anywhere in the filesystem and set using the MySQL configuration. Also, it is a best practice is to ensure that the logs in the filesystem are not cluttered with other logs such as application logs.

4. Result and Discussion

The web-based HOTS scoreboard is made using the PHP programming language and the SQL.Web database consists of three main menus namely the home menu, score menu, contact menu.

4.1. Home Menu

Home is the starting page or the first time when Hotsquiz is run.On this menu there is a slider and an explanation of what is meant by the HOTS game.

4.2. Score Menu.

The score menu functions to display the HOTS player’s data based on the name and sequence of scores from the largest to the smallest see figure 5.

Figure 4: Home Menu

Figure 5: Score Menu

This table is already connected to the unity game and every question that is successfully done will be sent directly to the scoreboard website.Extensive results carried out show that this ORDER by…DESC is working.

4.3. Game

The main view is the start page that will be accessed by the user. On this page, enter the username and press the play button.

4.4. Question Menu

On the Problem page, the user will do 1 of the 25 questions provided. Each correct answer will be worth 1 and if wrong is 0.

Figure 6: Game Start

Figure 7: Questions

And this is the Display Notification When the User is Right in Choosing Answers.

Figure 8: Answer Question

After working on the correct problem, the value will automatically be entered into the scoreboard on the website. If you see the score on Unity, it will display the status in the pause menu or when in the Island selection menu.

Figure 9: Score Status

Based on the problems above, the processing time needed to solve the problems in Kalimantan is 3 minutes, for Sulawesi Island the processing time is 5 minutes, and for Papua Island the processing time is 7 minutes. when the score is displayed there is a submit button to send scores of Papua, Kalimantan, Sulawesi to the scoreboard website using the $_POST Variable and automatically sort the numbers.

Figure 10: Pause Menu

5. Conclusion

Based on the research and discussion in the previous chapters, it can be concluded that the Web scoreboard with PHP and SQL has been successfully developed. This system is able to manage scores and can be updated automatically both to insert data and update data. Sending data from unity to php can already be done.

HOTS Game Educational Game Development uses Unity 3d game engine software with math problems. HOTS Game educational game runs on the android platform and has a genre of quiz and puzzle. This game has 3 different levels, namely creativity, critical thinking and problem solving. This game also has the highest value feature and a value recap which is useful for summarizing the result of player’s answers in each game session.

Maybe there is a need for buttons on the options menu still not available because the buttons have different types, namely toggle buttons and regular buttons. The toggle button in question is the music and sound settings button, while the regular button is the value and help button. Music and sound toggle buttons can be moved to the main menu of the game. Thus, the music or sound settings button can be used as the first setting for the player and added game levels with different levels of difficulty from the previous level.

  1. A. Baytak, S. Land, “A case study of educational game design by kids and for kids” in 2010 Procedia – Social and Behavioral Sciences,2010. https://doi.org/10.1016/j.sbspro.2010.03.853
  2. F. Ke, “An implementation of design-based learning through creating educational computer games: A case study on mathematics learning during design and computing”. Computers and Education,2014. https://doi.org/10.1016/j.compedu.2013.12.010
  3. Y. Udjaja, “Gamification assisted language learning for Japanese language using expert point cloud recognizer” International Journal of Computer Games Technology, 2018. https://doi.org/10.1155/2018/9085179
  4. Y. Udjaja, Renaldi, Steven, K. Tanuwijaya, I. K. Wairooy, “The Use of Role Playing Game for Japanese Language Learning” in 2019 Procedia Computer Science, 157, 298-305,2019. https://doi.org/10.1016/j.procs.2019.08.170
  5. J. Schell, The art of game design: A book of lenses. In The Art of Game Design: A Book of Lenses,2008.
  6. D. P. Kristiadi, Y. Udjaja, B. Supangat, R. Y. Prameswara, H. L. H. S. Warnars, Y. Heryadi, W. Kusakunniran, “The effect of UI, UX and GX on video games” In 2017 IEEE International Conference on Cybernetics and Computational Intelligence (CyberneticsCom) (pp. 158-163). IEEE,2017. https://doi.org/10.1109/cyberneticscom.2017.8311702
  7. Y. Udjaja, V. Guizot, N. Chandra, “Gamification for Elementary Mathematics Learning in Indonesia” International Journal of Electrical and Computer Engineering, 8(5), 3859, 2018. https://doi.org/10.11591/ijece.v8i5.pp3859-3865
  8. A. Oei, M. Patterson, “Playing a puzzle video game with changing requirements improves executive functions” Computers in Human Behavior,2014. https://doi.org/10.1016/j.chb.2014.04.046
  9. F. Kromann, “Beginning PHP and MySQL”, In Beginning PHP and MySQL, 2018.
  10. P. Kroll, P. Kruchten, “The Rational Unified Process Made Easy”, In Rational Unified Process Made Easy: A Practitioner’s Guide to the RUP,2003.
  11. M. Sangeetha, “Smart supply chain management using internet of things”, International Journal of Systems, Control and Communications,2018. https://doi.org/10.1504/ijscc.2018.090754
  12. S. Lydford, C# Primer. In Building ASP.NET Web Pages with Microsoft WebMatrix,2011. https://doi.org/10.1007/978-1-4302-4021-1_3
  13. D. Polancec, I. Mekterovic, ” Developing MOBA games using the Unity game engine” in 2017 40th International Convention on Information and Communication Technology, Electronics and Microelectronics, MIPRO , 2017. https://doi.org/10.23919/mipro.2017.7973661
  14. C. Bell, “MySQL for the Internet of Things”, In MySQL for the Internet of Things,2016.

Citations by Dimensions

Citations by PlumX

Google Scholar

Scopus

Crossref Citations

This paper is currently not cited.

No. of Downloads Per Month

No. of Downloads Per Country


Special Issues

Special Issue on Innovation in Computing, Engineering Science & Technology
Guest Editors: Prof. Wang Xiu Ying
Deadline: 15 November 2025

Special Issue: Trustworthy AI — Ensuring Explainability, Fairness, and Bias Mitigation Across Disciplines
Guest Editors: Dr. Shiladitya Munshi, Dr. Ayan Chakraborty, Dr. Kamalesh Karmakar
Deadline: 15 September 2025