Hello, there are ready-made text documents with test items. Their contents:

Тема 1: Стихийные бедствия. Автор: Булат Фаттахов 10. Таким женским именем звали ураган, сильно повредивший Новый Орлеан. Ответ: Катрина. 20. "Дождь лил четыре года, одиннадцать месяцев и два дня" именно там. Ответ: в Макондо. 30. В 1883 году было извержение вулкана именно на этом острове. Ответ: Кракатау (Остров назывался так же как и вулкан). 40. Армянские города Гюмри и Ванадзор, сильно пострадавшие во время землетрясения 1988 года, в советское время носили такие названия. Ответ: Ленинакан и Кировокан. 50. Крупнейшее за всю историю человечества это стихийное бедствие произошло в 1875 году в США, а не в Египте двумя тысячами годами ранее. Ответ: Нашествие саранчи. Тема 2: Города России. Автор: Булат Фаттахов 10. Это крупнейший город России после Москвы. Ответ: Санкт-Петербург. 20. Москва крупнейший город России, а Тольятти тоже крупнейший город в России среди таких. Ответ: Не являющийся столицей региона. 30. Это - крупнейший город самого большого острова России. Ответ: Южно-Сахалинск. 40. Именно в этом городе происходит действие сериала "Счастливы вместе". Ответ: Екатеринбург. 50. А именно этот город является самым западным городом России. Ответ: Балтийск.

And so on for all the files. I do not want to immediately see what is contained after the "Answer". It is necessary that the answers were initially hidden, becoming visible only when the user performs some action, for example, clicks on "Expand the answer."

Methods do not matter. Yes, you can conclude answers under spoilers - in HTML, for example, the easiest way is to tag - Ответ:<details>Текст ответа</details> (that it is not supported by IE and Firefox, that's okay). But how to perform multiple replacements (given that the answers can be in a few lines), for example, using the Sublime Text program that supports regular PCRE expressions ?

 Ответ: 'Текст ответа' 20. → Ответ: <details>'Текст ответа'</details> 20. Ответ: 'Текст ответа' Тема → Ответ: <details>'Текст ответа'</details> Тема

Thank.

    3 answers 3

    If at the end of the answer you must have the number of the next question or an empty line, for which you can catch on, then in Sublime you can:

    • Find What: ^Ответ: ((.|\n)+?)\n([0-9\n])
    • Replace With: Ответ: <details>\1</details>\n\3 (where \1 and \3 mean the contents of the first and third pairs of brackets in the regular schedule)

    (A few explanations: (.|\n)+ - take one or more of any characters, even line breaks, and +? - turn on lazy mode of operation instead of greedy, so that the regular program does not consider everything from the beginning of the first answer to the end of the last one)

      In Notepad ++ replace regular expressions with the checkbox AND new strings checked.

      Source text

       Тема 1: Стихийные бедствия. Автор: Булат Фаттахов 10. Таким женским именем звали ураган, сильно повредивший Новый Орлеан. Ответ: Катрина. 20. "Дождь лил четыре года, одиннадцать месяцев и два дня" именно там. Ответ: в Макондо. 30. В 1883 году было извержение вулкана именно на этом острове. Ответ: Кракатау (Остров назывался так же как и вулкан). 40. Армянские города Гюмри и Ванадзор, сильно пострадавшие во время землетрясения 1988 года, в советское время носили такие названия. Ответ: Ленинакан и Кировокан. 50. Крупнейшее за всю историю человечества это стихийное бедствие произошло в 1875 году в США, а не в Египте двумя тысячами годами ранее. Ответ: Нашествие саранчи. Тема 2: Города России. Автор: Булат Фаттахов 10. Это крупнейший город России после Москвы. Ответ: Санкт-Петербург. 20. Москва крупнейший город России, а Тольятти тоже крупнейший город в России среди таких. Ответ: Не являющийся столицей региона. 30. Это - крупнейший город самого большого острова России. Ответ: Южно-Сахалинск. 40. Именно в этом городе происходит действие сериала "Счастливы вместе". Ответ: Екатеринбург. 50. А именно этот город является самым западным городом России. Ответ: Балтийск.

      Replacement 1:

       ((\d+)\. ((?!\r\nОтвет:).)+) <input type=checkbox id=chk\2><label for=chk\2>\1</label>

      Result:

       Тема 1: Стихийные бедствия. Автор: Булат Фаттахов <input type=checkbox id=chk10><label for=chk10>10. Таким женским именем звали ураган, сильно повредивший Новый Орлеан.</label> Ответ: Катрина. <input type=checkbox id=chk20><label for=chk20>20. "Дождь лил четыре года, одиннадцать месяцев и два дня" именно там.</label> Ответ: в Макондо. <input type=checkbox id=chk30><label for=chk30>30. В 1883 году было извержение вулкана именно на этом острове.</label> Ответ: Кракатау (Остров назывался так же как и вулкан). <input type=checkbox id=chk40><label for=chk40>40. Армянские города Гюмри и Ванадзор, сильно пострадавшие во время землетрясения 1988 года, в советское время носили такие названия.</label> Ответ: Ленинакан и Кировокан. <input type=checkbox id=chk50><label for=chk50>50. Крупнейшее за всю историю человечества это стихийное бедствие произошло в 1875 году в США, а не в Египте двумя тысячами годами ранее.</label> Ответ: Нашествие саранчи. Тема 2: Города России. Автор: Булат Фаттахов <input type=checkbox id=chk10><label for=chk10>10. Это крупнейший город России после Москвы.</label> Ответ: Санкт-Петербург. <input type=checkbox id=chk20><label for=chk20>20. Москва крупнейший город России, а Тольятти тоже крупнейший город в России среди таких.</label> Ответ: Не являющийся столицей региона. <input type=checkbox id=chk30><label for=chk30>30. Это - крупнейший город самого большого острова России.</label> Ответ: Южно-Сахалинск. <input type=checkbox id=chk40><label for=chk40>40. Именно в этом городе происходит действие сериала "Счастливы вместе".</label> Ответ: Екатеринбург. <input type=checkbox id=chk50><label for=chk50>50. А именно этот город является самым западным городом России.</label> Ответ: Балтийск.

      Replacement 2:

       (</label>\r\n)(Ответ: ((?!\r\n(Тема:|<input)).)+) \1<div>\2</div>

      Result:

       Тема 1: Стихийные бедствия. Автор: Булат Фаттахов <input type=checkbox id=chk10><label for=chk10>10. Таким женским именем звали ураган, сильно повредивший Новый Орлеан.</label> <div>Ответ: Катрина.</div> <input type=checkbox id=chk20><label for=chk20>20. "Дождь лил четыре года, одиннадцать месяцев и два дня" именно там.</label> <div>Ответ: в Макондо.</div> <input type=checkbox id=chk30><label for=chk30>30. В 1883 году было извержение вулкана именно на этом острове.</label> <div>Ответ: Кракатау (Остров назывался так же как и вулкан).</div> <input type=checkbox id=chk40><label for=chk40>40. Армянские города Гюмри и Ванадзор, сильно пострадавшие во время землетрясения 1988 года, в советское время носили такие названия.</label> <div>Ответ: Ленинакан и Кировокан.</div> <input type=checkbox id=chk50><label for=chk50>50. Крупнейшее за всю историю человечества это стихийное бедствие произошло в 1875 году в США, а не в Египте двумя тысячами годами ранее.</label> <div>Ответ: Нашествие саранчи. Тема 2: Города России. Автор: Булат Фаттахов</div> <input type=checkbox id=chk10><label for=chk10>10. Это крупнейший город России после Москвы.</label> <div>Ответ: Санкт-Петербург.</div> <input type=checkbox id=chk20><label for=chk20>20. Москва крупнейший город России, а Тольятти тоже крупнейший город в России среди таких.</label> <div>Ответ: Не являющийся столицей региона.</div> <input type=checkbox id=chk30><label for=chk30>30. Это - крупнейший город самого большого острова России.</label> <div>Ответ: Южно-Сахалинск.</div> <input type=checkbox id=chk40><label for=chk40>40. Именно в этом городе происходит действие сериала "Счастливы вместе".</label> <div>Ответ: Екатеринбург.</div> <input type=checkbox id=chk50><label for=chk50>50. А именно этот город является самым западным городом России.</label> <div>Ответ: Балтийск.</div>

      Replacement 3:

       (Тема (\d+).*?)(\r\n<input) <h1 id=sec-\2>\1</h1>\3

      Result:

       <h1 id=sec-1>Тема 1: Стихийные бедствия. Автор: Булат Фаттахов</h1> <input type=checkbox id=chk10><label for=chk10>10. Таким женским именем звали ураган, сильно повредивший Новый Орлеан.</label> <div>Ответ: Катрина.</div> <input type=checkbox id=chk20><label for=chk20>20. "Дождь лил четыре года, одиннадцать месяцев и два дня" именно там.</label> <div>Ответ: в Макондо.</div> <input type=checkbox id=chk30><label for=chk30>30. В 1883 году было извержение вулкана именно на этом острове.</label> <div>Ответ: Кракатау (Остров назывался так же как и вулкан).</div> <input type=checkbox id=chk40><label for=chk40>40. Армянские города Гюмри и Ванадзор, сильно пострадавшие во время землетрясения 1988 года, в советское время носили такие названия.</label> <div>Ответ: Ленинакан и Кировокан.</div> <input type=checkbox id=chk50><label for=chk50>50. Крупнейшее за всю историю человечества это стихийное бедствие произошло в 1875 году в США, а не в Египте двумя тысячами годами ранее.</label> <div>Ответ: Нашествие саранчи. <h1 id=sec-2>Тема 2: Города России. Автор: Булат Фаттахов</div></h1> <input type=checkbox id=chk10><label for=chk10>10. Это крупнейший город России после Москвы.</label> <div>Ответ: Санкт-Петербург.</div> <input type=checkbox id=chk20><label for=chk20>20. Москва крупнейший город России, а Тольятти тоже крупнейший город в России среди таких.</label> <div>Ответ: Не являющийся столицей региона.</div> <input type=checkbox id=chk30><label for=chk30>30. Это - крупнейший город самого большого острова России.</label> <div>Ответ: Южно-Сахалинск.</div> <input type=checkbox id=chk40><label for=chk40>40. Именно в этом городе происходит действие сериала "Счастливы вместе".</label> <div>Ответ: Екатеринбург.</div> <input type=checkbox id=chk50><label for=chk50>50. А именно этот город является самым западным городом России.</label> <div>Ответ: Балтийск.</div>

      Replacement 4:

       (id=sec-(\d+).*?)(id|for)(=chk)(\d+) \1\3\4-\2-\5

      Click Replace All until the number of replacements is zero .
      This will be 2 times more clicks than questions in the largest topic.
      In principle, you can reduce the number of clicks in half.

      Result:

       <h1 id=sec-1>Тема 1: Стихийные бедствия. Автор: Булат Фаттахов</h1> <input type=checkbox id=chk-1-10><label for=chk-1-10>10. Таким женским именем звали ураган, сильно повредивший Новый Орлеан.</label> <div>Ответ: Катрина.</div> <input type=checkbox id=chk-1-20><label for=chk-1-20>20. "Дождь лил четыре года, одиннадцать месяцев и два дня" именно там.</label> <div>Ответ: в Макондо.</div> <input type=checkbox id=chk-1-30><label for=chk-1-30>30. В 1883 году было извержение вулкана именно на этом острове.</label> <div>Ответ: Кракатау (Остров назывался так же как и вулкан).</div> <input type=checkbox id=chk-1-40><label for=chk-1-40>40. Армянские города Гюмри и Ванадзор, сильно пострадавшие во время землетрясения 1988 года, в советское время носили такие названия.</label> <div>Ответ: Ленинакан и Кировокан.</div> <input type=checkbox id=chk-1-50><label for=chk-1-50>50. Крупнейшее за всю историю человечества это стихийное бедствие произошло в 1875 году в США, а не в Египте двумя тысячами годами ранее.</label> <div>Ответ: Нашествие саранчи. <h1 id=sec-2>Тема 2: Города России. Автор: Булат Фаттахов</div></h1> <input type=checkbox id=chk-2-10><label for=chk-2-10>10. Это крупнейший город России после Москвы.</label> <div>Ответ: Санкт-Петербург.</div> <input type=checkbox id=chk-2-20><label for=chk-2-20>20. Москва крупнейший город России, а Тольятти тоже крупнейший город в России среди таких.</label> <div>Ответ: Не являющийся столицей региона.</div> <input type=checkbox id=chk-2-30><label for=chk-2-30>30. Это - крупнейший город самого большого острова России.</label> <div>Ответ: Южно-Сахалинск.</div> <input type=checkbox id=chk-2-40><label for=chk-2-40>40. Именно в этом городе происходит действие сериала "Счастливы вместе".</label> <div>Ответ: Екатеринбург.</div> <input type=checkbox id=chk-2-50><label for=chk-2-50>50. А именно этот город является самым западным городом России.</label> <div>Ответ: Балтийск.</div>

      Substitution 5 (fix the joint made earlier)

       (\s*<h1(?:(?!<h1).)*)(</div>)(</h1>) \2\1\3

      Add some css:

       input { display: none; } input + label + div { display: none; } input:checked + label + div { display: block; } label { display: block; cursor: pointer; margin-top: 1em; } label:hover { color: blue; } label, div, h1 { white-space: pre-wrap; } 
       <h1 id=sec-1>Тема 1: Стихийные бедствия. Автор: Булат Фаттахов</h1> <input type=checkbox id=chk-1-10><label for=chk-1-10>10. Таким женским именем звали ураган, сильно повредивший Новый Орлеан.</label> <div>Ответ: Катрина.</div> <input type=checkbox id=chk-1-20><label for=chk-1-20>20. "Дождь лил четыре года, одиннадцать месяцев и два дня" именно там.</label> <div>Ответ: в Макондо.</div> <input type=checkbox id=chk-1-30><label for=chk-1-30>30. В 1883 году было извержение вулкана именно на этом острове.</label> <div>Ответ: Кракатау (Остров назывался так же как и вулкан).</div> <input type=checkbox id=chk-1-40><label for=chk-1-40>40. Армянские города Гюмри и Ванадзор, сильно пострадавшие во время землетрясения 1988 года, в советское время носили такие названия.</label> <div>Ответ: Ленинакан и Кировокан.</div> <input type=checkbox id=chk-1-50><label for=chk-1-50>50. Крупнейшее за всю историю человечества это стихийное бедствие произошло в 1875 году в США, а не в Египте двумя тысячами годами ранее.</label> <div>Ответ: Нашествие саранчи.</div> <h1 id=sec-2>Тема 2: Города России. Автор: Булат Фаттахов</h1> <input type=checkbox id=chk-2-10><label for=chk-2-10>10. Это крупнейший город России после Москвы.</label> <div>Ответ: Санкт-Петербург.</div> <input type=checkbox id=chk-2-20><label for=chk-2-20>20. Москва крупнейший город России, а Тольятти тоже крупнейший город в России среди таких.</label> <div>Ответ: Не являющийся столицей региона.</div> <input type=checkbox id=chk-2-30><label for=chk-2-30>30. Это - крупнейший город самого большого острова России.</label> <div>Ответ: Южно-Сахалинск.</div> <input type=checkbox id=chk-2-40><label for=chk-2-40>40. Именно в этом городе происходит действие сериала "Счастливы вместе".</label> <div>Ответ: Екатеринбург.</div> <input type=checkbox id=chk-2-50><label for=chk-2-50>50. А именно этот город является самым западным городом России.</label> <div>Ответ: Балтийск.</div>

      • Hmm .. Point 4 can be replaced by several, but remove the repeated pressing of the button. Well, instead of point 5, we should correct point 1: ((\d+)\. ((?!(\r\n)+(Ответ|Тема):).)+) . - Qwertiy ♦
      • Chat in discussion - Qwertiy ♦
      • Qwertiy seems to understand the difference between PCRE Sublime Text and Notepad ++. In ST, apparently , as in Unix-like operating systems , the \n metacharacter is enough, the use of the \r metacharacter - carriage transfer - will be erroneous. I suppose it is necessary to edit the answer taking into account the specifics of Sublime Text. Thank. - Sasha Chernykh

      Since the question is practical, let me add the answer of, of course, andreymal .

      First, it is desirable to replace a word or phrase that, when clicked, shows a spoiler, for example, in Chrome it is “Details”, with the help of the <summary> . If we want to click immediately on the "Answer", the replacement will be the following:

      • Find What: ^Ответ: ((.|\n)+?)\n([0-9\n])
      • Replace With : <details><summary>Ответ:</summary>\1</details>\n\3

      Replacement for tests

      Then, to display tags in Firefox, Edge and Opera Mini, you need to enable the Details-Polyfill script . For Explorer, unfortunately, this method does not work either, I checked NetRenderer on IE . The principle of the script: if the browser supports <details> and <summary> , then nothing happens; does not support - is involved. When there are many spoilers, then, alas, for quite a long time, why it is better to refrain from viewing in Firefox.

      The total see in the code.

       /* Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php */ (function (doc) { 'use strict'; var i, j, textWrapper, idCount = 0, rootNode = doc.documentElement, headElem = doc.getElementsByTagName('head')[0] || rootNode, bodyElem = doc.getElementsByTagName('body')[0] || rootNode, detailStyleTag = doc.createElement('style'), rules = 'details { display: block; overflow:hidden; } \n' + 'details[open] { height: auto; } \n' + 'summary { display:inline-block; } \n' + 'details * { visibility: hidden; } \n' + 'summary:first-child { visibility: visible; cursor: pointer; } \n' + 'details[open] * { visibility: visible } \n' + 'details[open] summary { margin-bottom: 0; }', /* Technically, a summary element has a "Phrasing content" model and should be displayed inline. * see http://dev.w3.org/html5/spec/Overview.html#the-summary-element, * http://dev.w3.org/html5/spec/Overview.html#phrasing-content * * FYI: Chrome currently and incorrectly treats the <summary> element as block level. */ addRule = function (styleTag, rule) { if (styleTag.nodeName.toLowerCase() === 'style') { if (!!styleTag['styleSheet'] && styleTag.styleSheet['cssText'] !== undefined) { //for MSIE styleTag.styleSheet.cssText += '\n' + rule; } else { styleTag.appendChild(doc.createTextNode('\n' + rule)); } } }, addEvent = function (el, eventName, f) { //W3C event biding if (el.addEventListener) { el.addEventListener(eventName, f); //IE event binding } else if (el.attachEvent) { el.attachEvent('on' + eventName, f); // Fallback, but don't overwrite a preexisting "onclick" attribute. } else if (el['on' + eventName] === null) { el['on' + eventName] = f; } }, toggle = function (e) { /* When a <summary> element is clicked the parent <details> element's "open" * attribute needs to be toggled to maintain the attribute's reflective nature. * see http://dev.w3.org/html5/spec/Overview.html#attr-details-open */ var detailsElmnt, target = e.target || e.srcElement; if (target.nodeName.toLowerCase() === 'summary') { detailsElmnt = target; while (detailsElmnt.nodeName.toLowerCase() !== 'details') { detailsElmnt = detailsElmnt.parentNode; //Break if we get to the root node without finding a details element. if (detailsElmnt === bodyElem) { detailsElmnt = null; break; } } if (detailsElmnt) { if (detailsElmnt.getAttribute('open')) { detailsElmnt.removeAttribute('open'); } else { detailsElmnt.setAttribute('open', 'open'); } bodyElem.className = bodyElem.className; } } }, init = function () { var detailsID, detailsElem, summaryElem, height, //height of the summary element detailsElems = doc.getElementsByTagName('details'); for (i = 0; i < detailsElems.length; i++) { detailsElem = detailsElems[i]; if (!detailsElem.getAttribute('data-detailsid')) { detailsID = 'd' + (idCount++); detailsElem.className += (' ' + detailsID); detailsElem.setAttribute('data-detailsID', detailsID); /* The spec expects the functional <summary> element to be the first child node of a * <details> element. In practice, it appears the first child <summary> element of a * <detials> element is enlisted as the functional <summary> element and displayed as * though it were the first child. For our purposes, we will do that explicitly. * Additionaly, If a <summary> element does not exist, a default toggle is provided. */ summaryElem = detailsElem.getElementsByTagName('summary')[0]; if (!summaryElem) { summaryElem = doc.createElement('summary'); summaryElem.appendChild(doc.createTextNode('Details')); detailsElem.insertBefore(summaryElem, detailsElem.firstChild); } else if ( summaryElem !== detailsElem.firstChild) { detailsElem.removeChild(summaryElem); detailsElem.insertBefore(summaryElem, detailsElem.firstChild); } height = summaryElem.offsetHeight; addRule(detailStyleTag, 'details.' + detailsID + ' { height: ' + height + 'px; }\n' + 'details.' + detailsID + '[open] { height: auto; }'); //Text nodes are killing me here. Thanks to @Remy for the solve. // Weighing the pros and cons of using a standard element like <span> or <b> vs a non-standard // but more semantically meaninfull <text> element, I think <text> wins, though not without some // regret. for (j = 0; j < detailsElem.childNodes.length; j++ ) { if (detailsElem.childNodes[j].nodeName === '#text' && (detailsElem.childNodes[j].nodeValue||'').replace(/\s/g, '').length) { textWrapper = document.createElement('text'); textWrapper.appendChild(detailsElem.childNodes[j]); detailsElem.insertBefore(textWrapper, detailsElem.childNodes[j]); } } } } }; /* * The inserted stylesheet needs to be first so as to have a minimal cascading coeffecient. * It also needs to be added to the DOM before IE can access it's properties. * The polyfill only adds default or necessary styling and should not interfere with other style rules. */ headElem.insertBefore(detailStyleTag, headElem.firstChild); init(); addRule(detailStyleTag, rules); addEvent(bodyElem, 'click', toggle); addEvent(bodyElem, 'DOMSubtreeModified', init); }(document, undefined)); 
       <html> <head> <meta charset="utf-8"> <title>details</title> <script> /*yepnope1.0.2|WTFPL*/ (function(a,b,c){function H(){var a=z;a.loader={load:G,i:0};return a}function G(a,b,c){var e=b=="c"?r:q;i=0,b=b||"j",u(a)?F(e,a,b,this.i++,d,c):(h.splice(this.i++,0,a),h.length==1&&E());return this}function F(a,c,d,g,j,l){function q(){!o&&A(n.readyState)&&(pr=o=1,!i&&B(),n.onload=n.onreadystatechange=null,e(function(){m.removeChild(n)},0))}var n=b.createElement(a),o=0,p={t:d,s:c,e:l};n.src=n.data=c,!k&&(n.style.display="none"),n.width=n.height="0",a!="object"&&(n.type=d),n.onload=n.onreadystatechange=q,a=="img"?n.onerror=q:a=="script"&&(n.onerror=function(){pe=pr=1,E()}),h.splice(g,0,p),m.insertBefore(n,k?null:f),e(function(){o||(m.removeChild(n),pr=pe=o=1,B())},z.errorTimeout)}function E(){var a=h.shift();i=1,a?at?e(function(){at=="c"?D(a):C(a)},0):(a(),B()):i=0}function D(a){var c=b.createElement("link"),d;c.href=as,c.rel="stylesheet",c.type="text/css";if(!ae&&(o||j)){var g=function(a){e(function(){if(!d)try{a.sheet.cssRules.length?(d=1,B()):g(a)}catch(b){b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,e(function(){B()},0)):g(a)}},0)};g(c)}else c.onload=function(){d||(d=1,e(function(){B()},0))},ae&&c.onload();e(function(){d||(d=1,B())},z.errorTimeout),!ae&&f.parentNode.insertBefore(c,f)}function C(a){var c=b.createElement("script"),d;c.src=as,c.onreadystatechange=c.onload=function(){!d&&A(c.readyState)&&(d=1,B(),c.onload=c.onreadystatechange=null)},e(function(){d||(d=1,B())},z.errorTimeout),ae?c.onload():f.parentNode.insertBefore(c,f)}function B(){var a=1,b=-1;while(h.length- ++b)if(h[b].s&&!(a=h[b].r))break;a&&E()}function A(a){return!a||a=="loaded"||a=="complete"}var d=b.documentElement,e=a.setTimeout,f=b.getElementsByTagName("script")[0],g={}.toString,h=[],i=0,j="MozAppearance"in d.style,k=j&&!!b.createRange().compareNode,l=j&&!k,m=k?d:f.parentNode,n=a.opera&&g.call(a.opera)=="[object Opera]",o="webkitAppearance"in d.style,p=o&&"async"in b.createElement("script"),q=j?"object":n||p?"img":"script",r=o?"img":q,s=Array.isArray||function(a){return g.call(a)=="[object Array]"},t=function(a){return Object(a)===a},u=function(a){return typeof a=="string"},v=function(a){return g.call(a)=="[object Function]"},w=[],x={},y,z;z=function(a){function h(a,b){function i(a){if(u(a))g(a,f,b,0,c);else if(t(a))for(h in a)a.hasOwnProperty(h)&&g(a[h],f,b,h,c)}var c=!!a.test,d=c?a.yep:a.nope,e=a.load||a.both,f=a.callback,h;i(d),i(e),a.complete&&b.load(a.complete)}function g(a,b,d,e,g){var h=f(a),i=h.autoCallback;if(!h.bypass){b&&(b=v(b)?b:b[a]||b[e]||b[a.split("/").pop().split("?")[0]]);if(h.instead)return h.instead(a,b,d,e,g);d.load(h.url,h.forceCSS||!h.forceJS&&/css$/.test(h.url)?"c":c,h.noexec),(v(b)||v(i))&&d.load(function(){H(),b&&b(h.origUrl,g,e),i&&i(h.origUrl,g,e)})}}function f(a){var b=a.split("!"),c=w.length,d=b.pop(),e=b.length,f={url:d,origUrl:d,prefixes:b},g,h;for(h=0;h<e;h++)g=x[b[h]],g&&(f=g(f));for(h=0;h<c;h++)f=w[h](f);return f}var b,d,e=this.yepnope.loader;if(u(a))g(a,0,e,0);else if(s(a))for(b=0;b<a.length;b++)d=a[b],u(d)?g(d,0,e,0):s(d)?z(d):t(d)&&h(d,e);else t(a)&&h(a,e)},z.addPrefix=function(a,b){x[a]=b},z.addFilter=function(a){w.push(a)},z.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",y=function(){b.removeEventListener("DOMContentLoaded",y,0),b.readyState="complete"},0)),a.yepnope=H()})(this,this.document) </script> <script > var Supports = { details: ('open' in document.createElement('details')) }; yepnope({ test: Supports.details, nope: 'js/details.polyfill.js' }); </script> </head> <body> Тема 1: Стихийные бедствия. Автор: Булат Фаттахов 10. Таким женским именем звали ураган, сильно повредивший Новый Орлеан. <details><summary>Ответ:</summary>Катрина.</details> 20. "Дождь лил четыре года, одиннадцать месяцев и два дня" именно там. <details><summary>Ответ:</summary>в Макондо.</details> 30. В 1883 году было извержение вулкана именно на этом острове. <details><summary>Ответ:</summary>Кракатау (Остров назывался так же как и вулкан).</details> 40. Армянские города Гюмри и Ванадзор, сильно пострадавшие во время землетрясения 1988 года, в советское время носили такие названия. <details><summary>Ответ:</summary>Ленинакан и Кировокан.</details> 50. Крупнейшее за всю историю человечества это стихийное бедствие произошло в 1875 году в США, а не в Египте двумя тысячами годами ранее. <details><summary>Ответ:</summary>Нашествие саранчи.</details> Тема 2: Города России. Автор: Булат Фаттахов 10. Это крупнейший город России после Москвы. <details><summary>Ответ:</summary>Санкт-Петербург.</details> 20. Москва крупнейший город России, а Тольятти тоже крупнейший город в России среди таких. <details><summary>Ответ:</summary>Не являющийся столицей региона.</details> 30. Это - крупнейший город самого большого острова России. <details><summary>Ответ:</summary>Южно-Сахалинск.</details> 40. Именно в этом городе происходит действие сериала "Счастливы вместе". <details><summary>Ответ:</summary>Екатеринбург.</details> 50. А именно этот город является самым западным городом России. <details><summary>Ответ:</summary>Балтийск.</details> </body> </html>

      UPD : начиная с 47-й версии Firefox поддерживает теги <summary> и <details> . Чтобы увидеть в Firefox действие тегов, пользователю необходимо ввести в адресную строку этого браузера about:config → Я обещаю, что буду осторожен → в строке поиска найти параметр dom.details_element.enabled → установить ему значение true .