const style = document.createElement('style');
style.textContent = `
*{margin:0;padding:0;box-sizing:border-box;}
/*ToolTip*/
.tooltip_input{display:block;margin-top:16px;}
.tooltip_input .tooltiptext{max-width:260px;visibility:hidden;background-color:#d9e3ef;border-radius:4px;border:1px solid rgba(66,116,176,.1);position:absolute;left:50%;transform:translateX(-50%);z-index:1;padding:5px;margin-top:8px;opacity:0;transition:opacity 0.5s;font-size:.8rem;color:#4274b0;line-height:12px;}
.tooltip_input .tooltiptext::after{content:"";border:solid transparent;position:absolute;left:8px;bottom:100%;border-bottom-color:#d9e3ef;border-width:9px;margin-left:0;}
.tooltip_input:hover .tooltiptext{visibility:visible;opacity:1;}
/*IMG*/
.image_div img{display:block;max-width:100%;max-height:300px;margin-left:auto;margin-right:auto;}
/*INPUT*/
.vvod_imya{min-width:260px;font-size:1.2rem;padding-left:5px;margin-top:0px;color:blue;}
.vvod_imya::placeholder{color:red;font-family:'Arial Narrow',Arial,sans-serif;opacity:0.5;z-index:99999;font-size:.9rem;}
.ablock{text-align:center;}
.answer{display:flex;flex-flow:column wrap;justify-content:start;align-items:center;}
`;
document.head.appendChild(style);
НEсоответствие "император – событие/факт"
ИМПЕРАТОРЫ РОССИИ XIX – нач. XX вв.
Вводите в текстовое поле имена и порядковый номер императоров России XIX – нач. XX вв. (пример: Максим 2)
Введите имя и порядковый номер императора России XIX – нач. XX вв. и нажмите "ВВОД/ENTER"
ЛЮДИ, СОБЫТИЯ, ФАКТЫ
Здесь появится картинка с номером
function showMe(value) {
this.value = value;
let div = document.querySelector('.image_div');
if ((this.value === 'александр первый') || (this.value === 'александр 1') || (this.value === 'Александр 1') || (this.value === 'александр Первый') || (this.value === 'Александр Первый') || (this.value === 'Александр первый')) {
div.innerHTML = '';
div.insertAdjacentHTML('afterBegin',
''
);
} else if ((this.value === 'николай первый') || (this.value === 'николай 1') || (this.value === 'Николай 1') || (this.value === 'николай Первый') || (this.value === 'Николай Первый') || (this.value === 'Николай первый')) {
div.innerHTML = '';
div.insertAdjacentHTML('afterBegin',
''
);
} else if ((this.value === 'александр второй') || (this.value === 'александр 2') || (this.value === 'Александр 2') || (this.value === 'александр Второй') || (this.value === 'Александр Второй') || (this.value === 'Александр второй')) {
div.innerHTML = '';
div.insertAdjacentHTML('afterBegin',
''
);
} else if ((this.value === 'Александр 3') || (this.value === 'александр 3') || (this.value === 'александр третий') || (this.value === 'александр Третий') || (this.value === 'Александр Третий') || (this.value === 'Александр третий')) {
div.innerHTML = '';
div.insertAdjacentHTML('afterBegin',
''
);
} else if ((this.value === 'николай второй') || (this.value === 'николай 2') || (this.value === 'Николай 2') || (this.value === 'николай Второй') || (this.value === 'Николай Второй') || (this.value === 'Николай второй')) {
div.innerHTML = '';
div.insertAdjacentHTML('afterBegin',
''
);
} else {
div.innerHTML = '';
}
}