CODEWITHSUNDEEP
javascripthtmlcsscounter
Jamiex304
Jamiex304

Reputation: 242

Adding a Counter to a Text Sequence

Currently I am developing a game I am using JavaScript for the Gameplay

One of the functions allows the user to see the sequence they must enter (It prints out the color they must click)

But The problem is sometimes they must hit the same circle twice etc and that is not that clear for the user.

So I was wondering if it is possible to add a counter to the sequence that displays something simple like

1.Red

2.Red

3.Blue

So They can see that It wants a second red etc

Here is a jsfiddle so you can see what I mean http://jsfiddle.net/uusL7hch/17/

The JavaScript File cut down to only the part where the code for displaying the name of the color is 

        $.each(this.genSequence, function (index, val) { //iterate over each value in the generated array
            timerCount = index;
            setTimeout(function () {

                that.flash($(that.shape + val), 1, 300, val);
                if ($("#text").is(":checked")) {//Check Box Function

                $(".TextBox").children(":first").html('<b>' + that.colors[val - 1] + '</b>');
                }
            }, 500 * index * that.difficulty); // multiply timeout by how many items in the array so that they play sequentially and multiply by the difficulty modifier

        });

        // Wait to start timer until full sequence is displayed
        setTimeout(function () {
            that.timerInterval = setInterval(function () {
                that.countDown()
            }, 100)

            setTimeout(function () {
                $(".TextBox").children(":first").html('');
            }, 500);
        }, 500 * timerCount * that.difficulty);
    },

Any help would be great

Upvotes: 0

Views: 100

Answers (2)

Jordi Castilla
Jordi Castilla

Reputation: 27003

U need to define css personal tag to your data list:

ol#your_list_name {
    list-style-type:decimal;
}

Upvotes: 0

Jamiec
Jamiec

Reputation: 136174

Just change the line which outputs the text:

$(".TextBox").children(":first").html('<b>' + (index + 1) + ":" +that.colors[val-1]+'</b>');

Updated fiddle: http://jsfiddle.net/uusL7hch/18/

Upvotes: 1

Related Questions