
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type="text"] { margin: 5px 0; border: 1px solid #aaa; padding: 5px; font-size: 1em; width: 175px; }
input[type="button"] { border: 1px solid #aaa; padding: 5px; font-size: 1em; width: 175px; }
body { margin: 25px; font-family: sans-serif; }
p.sh { margin-left: 0; font-weight: bold; }
p.blq { margin: 5px 0 5px 20px; }
hr { border: 0; border-top: 1px solid #555; display: block; margin: 1em 0; padding: 0; }
</style>

<title>Examen cumulativo de práctica de español 201</title>
</head>
<body>

<h1>Examen cumulativo de práctica de español 201</h1>
<ul style="font-weight: bold;"><li>Each time this page is refreshed, it will load a unique test.
    <ul><li>The test bank consists of 368 vocabulary items and 485 grammar items selected randomly.</li></ul>
</li>
    <li>You must click on the "Ver resultado" button at the bottom to see your result.
    <ul><li>The correct answer will appear next to those missed.</li></ul>
</li>
<li>View <a href="examen-cumulativo-de-práctica-de-español-201_source.php" target="_blank">source code</a>.</li>
</ul>
<hr>

<?php
// The practice test consists of 100 blanks total divided into five sections which cover the five chapters. Each chapter section is worth 20 points. Five are vocabulary and fifteen are grammar.
// Shuffle the vocab list of each chapter and pull the first five items.
function vocab($fname) {
    $html_content = '';
    $all_voc = explode("\n", file_get_contents($fname));
    $all_voc = array_filter($all_voc);
    shuffle($all_voc);
    for ($n=0;$n<=4;$n++) {
        $html_content.=$all_voc[$n].'<br>';
    }
    $html_content = preg_replace("/^/m",'<p class="blq">',$html_content);
    $html_content = preg_replace("/$/m",'</p>',$html_content);
    return $html_content;
}

// Each grammar section has five blanks, and the sections are separated by three dashes. Pull a random array item, i.e. grammar section from each grammar .txt question bank.
function grammar($fname) {
    $html_content = '';
    $gram = explode("---", file_get_contents($fname));
    $html_content = $gram[array_rand($gram)];
    $html_content = preg_replace("/\n$/",'',$html_content);
    $html_content = preg_replace("/^/m",'<p class="blq">',$html_content);
    $html_content = preg_replace("/$/m",'</p>',$html_content);
    $html_content = preg_replace("/<\/p><\/p>/",'</p>',$html_content);
    return $html_content;
}

$vocab_instr='<p class="sh">Vocabulario - Escribe la palabra equivalente en español. No incluyas el artículo.</p>';

$html_content=
'<h2>Capítulo nueve</h2>'.$vocab_instr.vocab('exa-201_09-1.txt').'<p class="sh">Por o para</p>'.grammar('exa-201_09-2.txt').'<p class="sh">Usa la voz pasiva refleja.</p>'.grammar('exa-201_09-3.txt').'<p class="sh">El dativo de interés. Usa el pretérito.</p>'.grammar('exa-201_09-4.txt').

'<hr><h2>Capítulo diez</h2>'.$vocab_instr.'<p style="font-weight: bold;">(m) = masculino (hombre), (f) = femenino (mujer)</p>'.vocab('exa-201_10-1.txt').'<p class="sh">Los pronombres relativos, <em>que</em>, <em>lo que</em>, <em>quien</em>.</p>'.grammar('exa-201_10-2.txt').'<p class="sh">Los mandatos familiares</p>'.grammar('exa-201_10-3.txt').'<p class="sh">Los mandatos formales</p>'.grammar('exa-201_10-4.txt').

'<hr><h2>Capítulo once</h2>'.'<p class="sh">Vocabulario - Escribe la palabra equivalente en español. Sólo incluye el artículo cuando se incluye en inglés.</p>'.vocab('exa-201_11-1.txt').grammar('exa-201_11-2.txt').grammar('exa-201_11-3.txt').'<p class="sh">Completa las siguientes traducciones. Usa el presente continuo o el pasado continuo. No incluyas el pronombre de sujeto.</p>'.grammar('exa-201_11-4.txt').

'<hr><h2>Capítulo doce</h2>'.$vocab_instr.vocab('exa-201_12-1.txt').grammar('exa-201_12-2.txt').'<p class="sh">Escribe:<br> a. el presente de indicativo con el objeto indirecto<br> b. el presente de indicativo con los pronombres de doble objeto<br> c. el presente continuo con los pronombres de doble objeto antes<br> d. el presente continuo con los pronombres de doble objeto después<br> e. el presente perfecto con los pronombres de doble objeto</p>'.grammar('exa-201_12-3.txt').grammar('exa-201_12-4.txt').

'<hr><h2>Capítulo trece</h2>'.$vocab_instr.vocab('exa-201_13-1.txt').grammar('exa-201_13-2.txt').grammar('exa-201_13-3.txt').'<p class="sh">En esta sección, es posible usar el subjuntivo, indicativo o infinitivo.</p>'.grammar('exa-201_13-4.txt');

preg_match_all('/\[([^\]]+)\]/', $html_content, $items);

$jav_vars = '';
$jav_if_statements = '';

// This number will increment and is placed at the end of the html id and Javascript variables to ensure it is unique.
$num = 1;
// Loop through each set of items within square brackets.
foreach ($items[1] as $i) {
    // Get html id. Make it alpha numeric and append $num to the end.
    $html_id = '_'.preg_replace("/[^[:alnum:]]/u", '', strtolower("{$i}{$num}"));
    // Replace the first instance found of square brackets with the html input field. preg_replace updates the $html_content variable.
    $html_content = preg_replace('/\[([^\]]+)\]/', '(' . $num . ') ' . '<input type="text" id="' . $html_id . '"><span id="check_' . $html_id . '"></span>', $html_content, 1);
    // Javascript variables use the html id above as well.
    $jav_vars .= 'var '.$html_id.' = document.getElementById(\''.$html_id.'\').value.toLowerCase().replace(/^\s\s*/, \'\').replace(/\s\s*$/, \'\');'."\n";
    // Javascript if statements
    $accepted_answers = '\' <span style="color: blue;">['.$i.']</span>\';';
    // Make the user's answers not caps sensitive.
    $answer_options = strtolower($i);
    // Count answer options based on number of commas. There is no comma after the last item so 1 is added.
    $num_answer_options = substr_count($answer_options,",") + 1;
    // Make $answer_options an array.
    $answer_options = (explode(",",$answer_options));
    // Take out white space.
    $answer_options = array_map('trim',$answer_options);
    // I can't think of a scenario where someone would have more than five accepted answers.
    if ($num_answer_options > 5) {
        error_message("Too many vocab items. Please use five or fewer.");
        return;
    }
    // Use php if statements to create Javascript if statements. Each value is appended to the $jav_if_statements variable. There is a lot of concatenation of variable content (php) with string content (Javascript).
    if ($num_answer_options == 5) {
        $jav_if_statements .= 'if ('.$html_id.' == "'.$answer_options[0].'" || '.$html_id.' == "'.$answer_options[1].'" || '.$html_id.' == "'.$answer_options[2].'" || '.$html_id.' == "'.$answer_options[3].'" || '.$html_id.' == "'.$answer_options[4].'") {';
    }
    if ($num_answer_options == 4) {
        $jav_if_statements .= 'if ('.$html_id.' == "'.$answer_options[0].'" || '.$html_id.' == "'.$answer_options[1].'" || '.$html_id.' == "'.$answer_options[2].'" || '.$html_id.' == "'.$answer_options[3].'") {';
    }
    if ($num_answer_options == 3) {
        $jav_if_statements .= 'if ('.$html_id.' == "'.$answer_options[0].'" || '.$html_id.' == "'.$answer_options[1].'" || '.$html_id.' == "'.$answer_options[2].'") {';
    }
    if ($num_answer_options == 2) {
        $jav_if_statements .= 'if ('.$html_id.' == "'.$answer_options[0].'" || '.$html_id.' == "'.$answer_options[1].'") {';
    }
    if ($num_answer_options == 1) {
        $jav_if_statements .= 'if ('.$html_id.' == "'.$answer_options[0].'") {';
    }
        // I did not want to repeat this under each php if statement because it is the same regardless of the number of items.
        $jav_if_statements .= 'check_'.$html_id.'.innerHTML = bien;
           num_right++;
        } else {
           check_'.$html_id.'.innerHTML = ojo +'.$accepted_answers.'
        }
           num_total++;'."\n";
    $num++;
}

// Start of Javascript
$jav_start = <<<JAV_START
<p class="sh"><input type="button" value="Ver resultado" onclick="check_answers()"></p>
<p id="number_correct"></p>
<script>
function check_answers() {
var bien = '<span style="color: green;"> &#10004;</span>';
var ojo = '<span style="color: red;"> &#10006;</span>';
var num_right = 0;
var num_total = 0;
JAV_START;

// This is where the Javascript variables and if statements will go in the generated practice.

// End of Javascript
$jav_end = <<<JAV_END
document.getElementById('number_correct').innerHTML = "Sacaste "+num_right+"/"+num_total+".";
}
</script>
JAV_END;

echo $html_content."\n".$jav_start."\n".$jav_vars.$jav_if_statements.$jav_end;

?>

</body>
</html>