Skip to main content
2 of 2
deleted 53 characters in body
Jamal
  • 34.9k
  • 13
  • 133
  • 237

I didn't see the entire code, but at first glance, there is some redundancy in there.

For example, this piece of code:

$(function() {
    $("#word1a").click(function() {
        $("#word1b").css("text-decoration", "line-through").css("opacity", "0.2").css("color", defaultTextColor);
        $("#word1a").css("text-decoration", "none").css("opacity", "1").css("color", defaultTextColor);
        $("#slash1").css("text-decoration", "line-through").css("opacity", "0.1");
        saveanswers();
    });

    $("#word1b").click(function() {
        $("#word1b").css("text-decoration", "none").css("opacity", "1").css("color", defaultTextColor);
        $("#word1a").css("text-decoration", "line-through").css("opacity", "0.2").css("color", defaultTextColor);
        $("#slash1").css("text-decoration", "line-through").css("opacity", "0.1")
        saveanswers();
    });

    $("#word2a").click(function() {
        $("#word2b").css("text-decoration", "line-through").css("opacity", "0.2").css("color", defaultTextColor);
        $("#word2a").css("text-decoration", "none").css("opacity", "1").css("color", defaultTextColor);
        $("#slash2").css("text-decoration", "line-through").css("opacity", "0.1");
        saveanswers();
    });


    $("#word2b").click(function() {
        $("#word2b").css("text-decoration", "none").css("opacity", "1").css("color", defaultTextColor);
        $("#word2a").css("text-decoration", "line-through").css("opacity", "0.2").css("color", defaultTextColor);
        $("#slash2").css("text-decoration", "line-through").css("opacity", "0.1")
        saveanswers();
    });

    $("#word3a").click(function() {
        $("#word3b").css("text-decoration", "line-through").css("opacity", "0.2").css("color", defaultTextColor);
        $("#word3a").css("text-decoration", "none").css("opacity", "1").css("color", defaultTextColor);
        $("#slash3").css("text-decoration", "line-through").css("opacity", "0.1");
        saveanswers();
    });


    $("#word3b").click(function() {
        $("#word3b").css("text-decoration", "none").css("opacity", "1").css("color", defaultTextColor);
        $("#word3a").css("text-decoration", "line-through").css("opacity", "0.2").css("color", defaultTextColor);
        $("#slash3").css("text-decoration", "line-through").css("opacity", "0.1")
        saveanswers();
    });

}); 

Can be shortened to this:

$(".word").click(function () {
    var clickedID = $(this).attr("id");
    var other = 'b';
    if(clickedID[1] != 'a'){
        other = 'a';
    }
    $(this).css("text-decoration", "none").css("opacity", "1").css("color", defaultTextColor);
    $("#" + clickedID[0] + other).css("text-decoration", "line-through").css("opacity", "0.2").css("color", defaultTextColor);
    $("#slash" + clickedID[0]).css("text-decoration", "line-through").css("opacity", "0.1");
    saveanswers();
});

Here's a fiddle that demonstrates what I mean

Hope this helped. Feel free to ask if you have any questions. :)

Rue Ryuzaki
  • 253
  • 1
  • 2
  • 7