Images not displaying after first attempt

120
February 15, 2022, at 8:00 PM

I am programming a psychological experiment where participants are playing an online game with six other players and in each round of the game, the active player can either lose or win (Image 1). After each round of the game, participants are asked to report their emotional reaction to the outcome by clicking on a corresponding emoji (Image 2). After this, the game continues. In the first round (or trial), everything works and displays smoothly, but in the second round, the emojis do not display for an unknown reason (Image 3).

IMAGE 1

IMAGE 2

IMAGE 3

This doesn't seem to be an issue of file paths, file names, missing files, or variable declarations, and I am out of ideas as to what might be causing this. Any suggestions would be much appreciated, and I am pasting the most relevant chunks of code below.

Emojis are defined outside of the functions. All of these image files are stored in a local "assets" folder:

var emojiImagesSize = calculateAspectRatioFit(527, 504, midDiv.clientWidth / 10, midDiv.clientHeight); // Adjust the size of each image to the available space
var emojiImages = '<div class = "divImages"> <img class = "nineEmotionalReactions" id = "valence1" src = "assets/Valence1.png" width = "' + emojiImagesSize.width + '" height = "' + emojiImagesSize.height + '">\n\
<img class = "nineEmotionalReactions" id = "valence2" src = "assets/Valence2.png" width = "' + emojiImagesSize.width + '" height = "' + emojiImagesSize.height + '" >\n\
<img class = "nineEmotionalReactions" id = "valence3" src = "assets/Valence3.png" width = "' + emojiImagesSize.width + '" height = "' + emojiImagesSize.height + '">\n\
<img class = "nineEmotionalReactions" id = "valence4" src = "assets/Valence4.png" width = "' + emojiImagesSize.width + '" height = "' + emojiImagesSize.height + '">\n\
<img class = "nineEmotionalReactions" id = "valence5" src = "assets/Valence5.png" width = "' + emojiImagesSize.width + '" height = "' + emojiImagesSize.height + '">\n\
<img class = "nineEmotionalReactions" id = "valence6" src = "assets/Valence6.png" width = "' + emojiImagesSize.width + '" height = "' + emojiImagesSize.height + '">\n\
<img class = "nineEmotionalReactions" id = "valence7" src = "assets/Valence7.png" width = "' + emojiImagesSize.width + '" height = "' + emojiImagesSize.height + '">\n\
<img class = "nineEmotionalReactions" id = "valence8" src = "assets/Valence8.png" width = "' + emojiImagesSize.width + '" height = "' + emojiImagesSize.height + '">\n\
<img class = "nineEmotionalReactions" id = "valence9" src = "assets/Valence9.png" width = "' + emojiImagesSize.width + '" height = "' + emojiImagesSize.height + '"></div>';

Order of player IDs in the game (also defined as a global variable):

var playerOrder = ["trianglePlayer1", "squarePlayer1", "trianglePlayer2", "squarePlayer2", "trianglePlayer3", "squarePlayer3", "trianglePlayer4", "squarePlayer4", "trianglePlayer1"];
var activePlayer = playerOrder[0]; // Starting from the first player

Function that triggers the emoji response scale screen:

outcomeReactionChoice(activePlayer, 1); // First game trial
function outcomeReactionChoice(player, trialNum){
    
    // Dim screen & hide canvas
    dimScreen(); // Adjusts the opacity of the screen
    hideCanvas(); // Adjusts the visibility of the canvas
    // Create relevant divs
    CreateDiv('sectionTop', 'emotionalReactionsPrompt'); // The HTML file contains five divs - sectionVeryTop, sectionTop, sectionMiddle, sectionBottom, sectionVeryBottom - which are used as parents for other elements.
    CreateDiv('sectionMiddle', 'emotionalReactions');
    // Display prompt
    var emojiReaction = "<p class = 'textInstructions' id = 'emojiPrompt'>How bad/good do you feel because of this player's outcome? <br> <span class = 'markRed'> YOUR REACTION WILL NOT BE SHOWN TO OTHER PLAYERS IN THIS ROUND. </span></p>";
    $('#emotionalReactionsPrompt').html(emojiReaction);
    // Display emojis 
    $('#emotionalReactions').html(emojiImages);
    var nextTrial = trialNum + 1;
    // Move to next player
    var activePlayerIndex = playerOrder.indexOf(player);
    // Start next trial unless the last trial has been reached
    var nextPlayer = playerOrder[activePlayerIndex + 1];
    // What happens when one of the emojis is clicked?
    $('#valence1').click(function() {
        $('#emotionalReactionsPrompt').fadeOut(500);
        $('#emotionalReactions').fadeOut(500);
        $('#gameOutcome').fadeOut(500);
        setTimeout(function() {
            undimScreen(); // Adjusts the opacity of the screen
            reappearCanvas(); // Adjusts the visibility of the canvas
            gameChoice(nextPlayer, nextTrial)}, 600); // Go to the next game round
    });
    $('#valence2').click(function() {
        $('#emotionalReactionsPrompt').fadeOut(500);
        $('#emotionalReactions').fadeOut(500);
        $('#gameOutcome').fadeOut(500);
        setTimeout(function() {
            undimScreen();
            reappearCanvas();
            gameChoice(nextPlayer, nextTrial)}, 600);
    });
    $('#valence3').click(function() {
        $('#emotionalReactionsPrompt').fadeOut(500);
        $('#emotionalReactions').fadeOut(500);
        $('#gameOutcome').fadeOut(500);
        setTimeout(function() {
            undimScreen();
            reappearCanvas();
            gameChoice(nextPlayer, nextTrial)}, 600);
    });
    $('#valence4').click(function() {
        $('#emotionalReactionsPrompt').fadeOut(500);
        $('#emotionalReactions').fadeOut(500);
        $('#gameOutcome').fadeOut(500);
        setTimeout(function() {
            undimScreen();
            reappearCanvas();
            gameChoice(nextPlayer, nextTrial)}, 600);
    });
    $('#valence5').click(function() {
        $('#emotionalReactionsPrompt').fadeOut(500);
        $('#emotionalReactions').fadeOut(500);
        $('#gameOutcome').fadeOut(500);
        setTimeout(function() {
            undimScreen();
            reappearCanvas();
            gameChoice(nextPlayer, nextTrial)}, 600);
    });
    $('#valence6').click(function() {
        $('#emotionalReactionsPrompt').fadeOut(500);
        $('#emotionalReactions').fadeOut(500);
        $('#gameOutcome').fadeOut(500);
        setTimeout(function() {
            undimScreen();
            reappearCanvas();
            gameChoice(nextPlayer, nextTrial)}, 600);
    });
    $('#valence7').click(function() {
        $('#emotionalReactionsPrompt').fadeOut(500);
        $('#emotionalReactions').fadeOut(500);
        $('#gameOutcome').fadeOut(500);
        setTimeout(function() {
            undimScreen();
            reappearCanvas();
            gameChoice(nextPlayer, nextTrial)}, 600);
    });
    $('#valence8').click(function() {
        $('#emotionalReactionsPrompt').fadeOut(500);
        $('#emotionalReactions').fadeOut(500);
        $('#gameOutcome').fadeOut(500);
        setTimeout(function() {
            undimScreen();
            reappearCanvas();
            gameChoice(nextPlayer, nextTrial)}, 600);
    }); 
    $('#valence9').click(function() {
        $('#emotionalReactionsPrompt').fadeOut(500);
        $('#emotionalReactions').fadeOut(500);
        $('#gameOutcome').fadeOut(500);
        setTimeout(function() {
            undimScreen(); 
            reappearCanvas(); 
            gameChoice(nextPlayer, nextTrial)}, 600);
    });
};

Note: Variable activePlayer is updated accordingly, the code to do that was cut.

Function CreateDiv():

function CreateDiv(ParentID, ChildID) {
    var d = $(document.createElement('div'))
    .attr("id", ChildID);
    var container = document.getElementById(ParentID);
    d.appendTo(container);
};

Please let me know if any other information would be useful, the code is too long and intertwined to be posted as a snippet. Thank you!

Rent Charter Buses Company
READ ALSO
How to scale down page content to fit window.print()

How to scale down page content to fit window.print()

I have a problem with windowprint function

169
Chrome vertically aligns any image opened in a new tab

Chrome vertically aligns any image opened in a new tab

Whenever you open an image in chrome, it displays it in a dark background with vertically and horizontally centeredI just wondered which CSS properties Chrome uses to achieve that

124
How can I forcefully change the padding inside a mat-expansion-panel-body?

How can I forcefully change the padding inside a mat-expansion-panel-body?

so I just created an expansion panel and it's working fine (it's very hardcoded though)I need to, however, eliminate a padding entirely from the subpanel part and I can't find a proper way to do it

126
html/css/js - marquee, scroll one element then pause, then scroll again

html/css/js - marquee, scroll one element then pause, then scroll again

I am trying to create an overlay page for my twitch channelI play Rocket League and the tracker network site provides overlays that show your rank

100