our $change_matrix = '
um über mit von vom nach zum zur in an auf
der das des dem den ein einer einem einen eines
';

@colors = qw(ccccff 7aedaa ddeecc ffccee);

our %change_matrix;
our %color;
our $dropdown_number = 0;

$i = 0;
for (split /\n/, $change_matrix){
    next if /^\s*$/;
    my @words = sort(split /\s+/);
    for my $kw (@words) {
        $change_matrix{$kw} = [ "???", @words ];
        $color{$kw} = $colors[$i%@colors];
    }
    # uppercase
    for (@words) {
        s/(.)(.*)/\U$1\E$2/;
    }
    for my $kw (@words) {
        $change_matrix{$kw} = [ "???", @words ];
        $color{$kw} = $colors[$i%@colors];
    }
    $i += 1;
};

for (keys(%change_matrix)) {
    print "$_ => ".join(", ", @{$change_matrix{$_}})."\n";
    print "$_ => ".$color{$_}."\n";
}

sub generate_drop_down($)
{
    my $name = "dropdown$dropdown_number";
    $dropdown_number += 1;
    my $word = $_[0];
    my @variants = @{$change_matrix{$word}};
    $options = join("", map {"<option value=$_>$_</option>"} @variants);
    my $color = $color{$word};
    if ($color) {
        $color = "background:#$color";
    }
    my $onchange = "onchange='javascript:myAlert(this.form.$name, \"$word\")'";
    return "<form style='display:inline!important;'><select name='$name' $onchange style='font-size:80%; $color'>".$options."</select></form>"; 
}
sub highlight_word($$)
{
    my $tag = $_[0];
    my $text = $_[1];
    if ($tag=~/^<[aA]/) {
        return $tag.$text;
    }
    my $re = join("|", keys(%change_matrix));
    #$text =~ s@ ([Aa]uf) @<input contenteditable=True style='text-color:#eecccc' />@g;
    $text =~ s@(^|[;> ])($re)(?=([ <]|$))@"$1".generate_drop_down($2)@eg;
    return $tag.$text;
}

$jquery = "<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>";
local $/;
$text = <>;
$text =~ s@(<a.*?>)(.*?)(</a>)@$2@g;
$text =~ s/(<.*?>)([^<]*)(?=<)/highlight_word($1, $2)/eg;
$info_div = "
    <div style='
        position:fixed;
        bottom:0;
        right:0;
        color:white;
        background-color:green;
        font-size:70%;
        padding:5pt;
        z-index:1000;
        border-top-left-radius:
        5pt;-moz-border-radius-topleft:5pt;
        '>
            <span id='wrong_answers' style='color:#ff2222;'>0</span>&nbsp;&nbsp;
            <span id='correct_answers'>0</span>&nbsp;&nbsp;
            <span id='yet_to_answer'>$dropdown_number</span>
    </div>";

$text =~ s@(<body[^>]*>)@<script type="text/javascript" src="Kiew.js"></script>$jquery$1$info_div@i;
print $text;
