Simple recommendation based on question answers
HTML
<div class="wrap">
<p>В этом году зачисление в вузы будет состоять из двух этапов, причем на первом этапе вуз может заполнить до 80% бюджетных мест. Новые правила вызывают обеспокоенность у наших абитуриентов, которые спрашивают: как правильно распорядится оригиналом аттестата при подаче документов, как выбрать оптимальную стратегию поступления, чтобы в августе увидеть себя в списке зачисленных в вуз, причем именно в тот и на ту программу, на которой хотелось бы учиться. Попробуем предложить несколько вариантов стратегий.</p>
<p>В первую очередь, ответь себе на вопросы:</p>
<p class="question">Ты уже решил, на какую образовательную программу хочешь поступить?</p>
<p class="nb">В 2015 году в Вышке открыт прием на 59 образовательных программ. Узнать больше о них можно <a href="http://www.hse.ru/education/">здесь</a>.</p>
<input id="check1" type="radio" name="answer1" value="1"><label for="check1">Да</label>
<input id="check2" type="radio" name="answer1" value="0"><label for="check2">Нет</label>
<p class="question">Готов ли ты оплачивать обучение?</p>
<p class="nb">Узнать подробнее об образовательных кредитах ты можешь <a href="http://www.hse.ru/org/hse/kredo/">здесь</a>.</p>
<input id="check3" type="radio" name="answer2" value="1"><label for="check3">Да</label>
<input id="check4" type="radio" name="answer2" value="0"><label for="check4">Нет</label>
<p class="question">Имеешь ли ты право на скидку?</p>
<div class="nb">
<p>Проанализируй свои баллы ЕГЭ. Ориентируйся на проходные баллы прошлых лет. Имей в виду, что в Вышке в зависимости от результатов ЕГЭ абитуриент, не прошедший по бюджетному конкурсу, может получить скидку в размере 70%, 50% или 25% на первый год обучения. Скидка может быть продлена и на следующие годы обучения, если студент показывает хорошую...
CSS
body {font-family: arial, sans-serif; font-size: 12pt;}
p, input {line-height: 1.5em; margin: .5em 0 0;}
p.question {font-size: 110%; font-weight: bold; line-height: 1.2em; color: #333; margin-top: 2em;}
hr {margin: 1em -1.5em;}
label + input {margin-left: 1.3em;}
label {margin-left: .3em;}
.nb {font-size: 90%; font-style: italic;}
.answer .nb {text-indent: 0; background-color: lightyellow; padding: .5em 1.5em 1em; margin: .5em 0 1em -1.5em;}
.answer {text-indent: -1.1em;}
.wrap {width: 60%; min-width: 24em; max-width: 40em; margin: 0 auto;}
JavaScript
$( "input:radio" )
.change(function () {
var num = "";
var q = 0;
$( "input:radio:checked" ).each(function() {
num += $( this ).val();
q++;
});
if (q == 3) {
$( ".a_" + num ).fadeIn(500);
$( ".answer" ).not( ".a_" + num ).fadeOut(100);
}
})
.change();