Title of thesis Create a web application for the Psychology Department of the University of Trier. The psychology department of the University of Trier commissioned a web application to observe user behavior. This project is related to the increasing research on how video games are relevant to psychology and vice versa.
Background
Objectives and Purpose
Upon completion of the project, a study would be conducted to check for correlations between the generated data and data from other psychological tests. This proof of concept will be used to obtain a research grant which will be used to pay for the production of a higher quality project in the future.
Framework and Limitations
Justification
Motivation
This can lead to a person making life choices that are not in line with what is best for them in the long run. Several people in the psychology department testify that a significant bottleneck in psychology research is a low amount of high quality and organized data. More time than ever will be spent in virtual reality than ever, and it is important to stay informed about how these activities relate to psychology and the brain.
Research Questions and Methodology
The aim of this project is to provide a way to look at aspects of behaviour, to collect more data, in a way that is more cost effective and has a lower dropout rate than previous psychological exercises. Regarding UI design decisions, the team of psychologists who commissioned this project have full control. As the author of this thesis does not study psychology, they are unable to comment on most of the graphic design choices that affect the planning and development of this project.
Thesis Structure
This application was designed for use in a study by the Psychology Department of the University of Trier, Germany. The images shown in this chapter are screenshots of a working application created by the writer of this assignment. All content that appears in the screenshots, including text and images, was provided by a group of psychologists who commissioned the app for their research.
Overview
For each of the 40 pictures in the test phase, the user has to press the key corresponding to whether or not they think this is the correct text for that picture. The thought bubble contains an image that expands to fill the user's browser window. The character's computer screen then expands to fill the user's browser window and the user continues to the next phase.
How to set up and run the application
This can be done by first clicking somewhere inside the browser window, for example in the white space to the right of the vertical group of buttons, and then pressing f11 on the keyboard. Before the study participants enter the room, you must place a type marker on the "Y" button to indicate "No" and one on the "M" button to indicate "Yes." The user will fill out the form and then follow the on-screen instructions until the application is complete.
Once they have left, you can refresh the browser window by holding down the Control key and pressing the "R" key on the keyboard at the same time. Backing up the data is done by pressing the "DATA BUTTON" on the pre-start page and copying and pasting the contents into a text file stored offline in a location you can access. Navigating to the pre-start page after backing up data is as easy as refreshing the browser window.
The content intended to be copied can be found in the text block at the bottom of the page. At the top of the page there is a table with the data in an easy to read format. Further below is a text block that includes first the user information and then immediately after the study data.
Don't forget to scroll to the bottom of the page and copy all the information.
Debugging
The "SKIPS: Gives you options to jump to different locations in the game" button provides skip functionality. This text will have a yellow background and is located in the upper left corner of the form page (Image 8). This is useful when you want to see the transition between the learning phase and the next part.
This is useful when you want to see the transition after the end of a certain stage. Clicking on the highlighted yellow area of the actual instructions on the form page teleports you to the post-form page, the form page, so you don't have to fill out every single element of the form a dozen times in a row while testing functionality immediately after the form. "TEST THE LAST PAGE QUESTIONNAIRE: Once you have completed the initial form (so you will be assigned an ID), the cover story will pause for 10 seconds and then you can test the questionnaire on the last page" allows you to test the questionnaire at the end of app (picture 4).
After pressing this button, fill out the form as usual and press the "Author" (continue) button.
Key Files Functions and Variables
After this list of variables, there is another list of variables that are various values and holders that will be used throughout the application. In this thesis, retention will be defined as the ability of the application to retain the user throughout the duration of the application.
Theory
Practice
It is possible to fill the sides of the screen with statistics and bubble letters that read "Good job!!". This is because at the beginning of the project there is no system other than web programming in which the author of this thesis has some specialty. It is a combination of some answers given in the form at the beginning of the application, such as the day of the user's mother's birth and the first letter of the user's father's first name.
The questions are related to the answers given by the user in the end-of-application questionnaire. The Phase Data Table (Table 2) shows information about each of the 40 images encountered in each of the five phases. The Phase data table contains the number of the phase (1-5), the number of the specific image-text pair (1-40), the truth of the image-text combination (0=false, 1=true), the time taken to answer in milliseconds, the accuracy (0=wrong, 1=correct) and the key pressed (0=Think the image-text pair is correct (“M”), 1=Think the image-text pair is incorrect (“Y”)).
The order of the pairs in each phase does not change from user to user. The order was randomized once and then set to be the same afterwards for each run of the app. During the development of the app, it was possible to add a new column to a table here and there when it was discovered that new functionality was needed.
Most of the project is consumed by piecing together bits of code.
Process of Development
Stackexchange.com was used frequently to debug JavaScript and PHP, as well as the other languages less frequently. Then, by checking the prospects in relation to the instructions given by the client and in relation to the author of this dissertation's personal response to the aesthetics. Firefox was the primary browser that would be used when the app was used in the study by the Department of Psychology at Trier University.
Learning
JavaScript and CSS
This is not the most efficient way to do an animation in terms of computing. The computer will work less if you use CSS transforms to animate an element, e.g. creating a class with transition:transform time, style;. When you use JavaScript to apply this class to an element, it will animate any change in the transform property.
It is important to remember that changing CSS transforms is not an additive action like changing a CSS property through jQuery animations. You must set the transformation to the value you want to end up with, starting from its original potion, not starting from the position you transformed it to earlier.
How to hide elements
This is unacceptable because instant image switching is important to the appearance of the app. This was solved by first loading each image as the largest size it will be in its entire career in the app, then after everything is loaded, resize them back to their starting positions with 0 height. A working proof of concept has been created which has the power to demonstrate the feasibility of this idea depending on the outcome of the study results.
Many ideas were explored during the collaboration on this project. Some of these came close to fruition, as evidenced by the other files in the project files. Time has been spent carefully adding comments to all files to help the prospective collaborator if different from the author of this thesis.
They all have the same theme and explore user behavior through this character of Stefan or Stefanie, and if enough of these small projects are fleshed out, they can easily be put together, according to the client's plan from the beginning of the project. Stefanie has been working for five years in a family business in a small village in the Münsterland. In the first six months she was very happy there - everything was new and exciting.
In the following you will see 20 couples, each with a picture and a text, and hear a few sentences about the headphones, which should explain the topic even further.
