Encounter

sectors.js

/*
Универсальный обработчик секторов
http://ulan.en.cx/Guestbook/Messages.aspx?topic=282969
*/

$(function() {
	if (/GameScenario/.test(location.href)) {
		$('.scenarioBlock').each(function(b, block) {
			$('[id$=divSectorName]', block).next('span').each(function(s, sector) {
				$('.s-' + (s + 1) + '-text', block).text($(sector).text());
			});
		});
	} else {
		let interval = 5000;

		if ($('#sectors').length) { // Расширение движка EN.CX
			interval = 500;
		} else {
			let level = $('input[name=LevelNumber]').val();
			sectorsHandler(JSON.parse(sessionStorage.getItem('level' + level)));
		}

		if (window.sectorsInterval)
			clearInterval(window.sectorsInterval);

		sectorsGet(level);
		window.sectorsInterval = setInterval(sectorsGet, interval, level);
	}
});

function sectorsHandler(arSectors) {
	if (arSectors)
		$.each(arSectors, function(i, sector) {
			if (sector.IsAnswered) {
				$('.s-' + sector.Order + '-hide').hide();
				$('.s-' + sector.Order + '-text').text(sector.Answer.Answer).addClass('color_correct');
			}
		});
}

function sectorsGet(level) {
	if (level) {
		$.getJSON(location.pathname + '?level=' + level + '&rnd=' + Math.random() + '&json=1', function(data) {
			sectorsHandler(data.Level.Sectors);
			sessionStorage.setItem('level' + data.Level.Number, JSON.stringify(data.Level.Sectors));
		});
	} else {
		let arSectors = [];

		$('#sectors p').each(function(i) {
			let answer = $('.color_correct', this).contents()[0];

			if (answer)
				answer = answer.nodeValue;

			arSectors.push({
				'Order': i + 1,
				'IsAnswered': answer ? true : false,
				'Answer': {
					'Answer': answer
				}
			});
		});

		sectorsHandler(arSectors);
	}
}

task.html

Пример разметки задания

<script src="sectors.js"></script>

<style>
	.table { border-collapse: collapse; }
	.table td { border: 1px solid #fff; padding: 10px; width: 200px; vertical-align: middle; text-align: center; }
</style>

<table class="table">
	<tr>
		<td>Сектор</td>
		<td>Убрать, если закрыт</td>
		<td>Заменить/вставить ответ</td>
	</tr>
	<tr>
		<td>1</td>
		<td><span class="s-1-hide">*</span></td>
		<td><span class="s-1-text">*</span></td>
	</tr>
	<tr>
		<td>2</td>
		<td><span class="s-2-hide">*</span></td>
		<td><span class="s-2-text">*</span></td>
	</tr>
	<tr>
		<td>3</td>
		<td><span class="s-3-hide">*</span></td>
		<td><span class="s-3-text">*</span></td>
	</tr>
	<tr>
		<td>4</td>
		<td><span class="s-4-hide">*</span></td>
		<td><span class="s-4-text">*</span></td>
	</tr>
	<tr>
		<td>5</td>
		<td><span class="s-5-hide">*</span></td>
		<td><span class="s-5-text">*</span></td>
	</tr>
</table>