<!DOCTYPE html>
<html lang="ru">
 <head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Текстовый квиз</title>
	</head>
	<style type="text/css">
		*{
			box-sizing: border-box;
		}
		#kviz-form .quiz__answer-item{
			transition: .3s;
			display: flex;
			position: relative;
			outline: 1px solid transparent;
			transition: .3s color, background-color;
			background-color: #FFFFFF;
			border-radius: min(8px,27px);
			border: 1px solid #04c189;
			color: #000000;
			padding: 13px 12px;
			width: 100%;
			gap: 12px;
			align-items: baseline;
			cursor: pointer;
		}
		#kviz-form .quiz__answer-item:hover{
			border-color: #1058ad;
		}
		#kviz-form .quiz__answer-item:has(input[type="radio"]:checked){
			border-color: #0f59b1;
			outline-color: #125bb3;
			/*background: #1159AE;*/
			background: #dae5f2;
		}
		#kviz-form input[type="radio"]:checked + .radio-button-span i{
			background-color: #1159AE;
			border-color:#1057ab;
		}
		.radio-button-span{
			display: flex;
			flex-direction: row;
			align-items: end;
			gap: 12px;
			flex: 1;
		}
		.inp-radio{
			display: none;
		}
		.svg-icon{
			transform: scale(1.15);
			
		}
		i{
			vertical-align: middle;
		}
		.i-icon{
		color: #FFFFFF;
			width: 20px;
			height: 20px;
			background: transparent;
			border: 1px solid #01c188;
			border-radius: 9999px;
			flex-shrink: 0;
			user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			-webkit-user-select: none;
			fill: currentColor;
			color: inherit;
			display: inline-flex;
			font-size: inherit;
			align-items: center;
			justify-content: center;
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			overflow: visible;
			flex-shrink: 0;
		}
		.quiz__answer-item-text{
			display: inline-block;
			flex: 1;
		}
		.choice-options-wrapper{
			display: flex;
			flex-direction: column;
			gap: 12px;
		}
		.la-text-field{
			display: block;
			word-break: break-word;
			min-height: 1em;
			width: 100%;
			margin-top: 12px;
			margin-bottom: 5px;
		}
		.text-input{
			padding: 8px;
			width: 100%;
			line-height: 20px;
			border-color: #03bf87;
			padding: 8px 12px;
			border-radius: 8px;
			color: #000000;
			border: 1px solid #03bf87;
		}
		.text-input:hover{
			border-color: #0e58af;
		}
		.text-input:focus{
			border: 2px solid #0e58af;
			outline: none;
			/*background-color: #333;*/
		}
    
	</style>
	<body>
	<form action="#!" class="quiz__form" id="kviz-form">
		<div class="choice-options-wrapper">
			<label 
				 id="label-question-#B_INDEX#-answer-#INDEX_RADIO_ANSWER#"
				 class="quiz__answer-item" 
				 for="rezult-question-#B_INDEX#-answer-#INDEX_RADIO_ANSWER#">
				 
				 <input 
					class="inp-radio"
					onchange="return nextStep(this, #TO_INDEX#, #FROM_INDEX#, #CURRENT_INDEX#);"
					type="radio" 
					name="rezult-question-#B_INDEX#" 
					id="rezult-question-#B_INDEX#-answer-#INDEX_RADIO_ANSWER#" 
					value="#TEXT_RADIO_ANSWER#" 
					data-indexblock="#B_INDEX#" 
					/>
					<span tabindex="-1" class="radio-button-span">
						<i class="i-icon size-xsmall before-radio" style="color: #FFFFFF; width: 20px; height: 20px;">
							<div class="svg-icon" style="width: 14px; height: 14px;">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
								<path d="M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z">
								</path>
								</svg>
							</div>
						</i>
						<span data-v-859f2586="" class="quiz__answer-item-text">#TEXT_RADIO_ANSWER#</span>
					</span>
				   <div class="quiz__answer-item-text"></div>
			</label>
		</div>	
		
		<label class="la-text-field">#INPUT_TEXT_TITLE#</label>
			<input 
			 data-numbertextinput="#NUMBER_TEXT_INPUT#" 
			 class="text-input #IS_EMAIL##IS_PHONE#"
			 type="text" 
			 name="question-#B_INDEX#-input-#NUMBER_TEXT_INPUT#" 
			 id="question-#B_INDEX#-input-#NUMBER_TEXT_INPUT#"
			 #PLASE_HOLDER_PHONE##PLASE_HOLDER_EMAIL#
			 value="" 
			 data-indexblock="#B_INDEX#" 
			 data-labelinput="#INPUT_TEXT_TITLE#" 
			 />
		
	</form>	
	<br><br><br><br>
	
		
		<div data-v-b2e592d0="" class="align-column">

			<div data-v-b2e592d0="" class="question-info">
				<span data-v-b2e592d0="" class="question-order">2.</span>
				<div data-v-b2e592d0="" class="question-title-wrapper">
				<div data-v-b2e592d0="" class="question-title">
				<p data-v-b2e592d0="" class="editable-input view">Number</p>
				</div>

				</div>
			</div>
			
			<div data-v-31c036f4="" class="question-body question-wrapper" data-order="2">
				<div data-v-03bbd932="" class="i-text">
					<label data-v-03bbd932="" class="input-field prepend-icon" for="i-text-58" disabled="false">
						<i data-v-e0fc2083="" data-v-03bbd932="" class="i-icon size-xsmall icon-left" style="width: 20px; height: 20px;">
						<div data-v-e0fc2083="" class="svg-icon" style="width: 14px; height: 14px;">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
						<!--! Font Awesome Pro 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
						<path d="M424 80a40 40 0 1 0 0 80 40 40 0 1 0 0-80zm88 40c0 .8 0 1.6 0 2.5c-.6 20.2-7.9 39.7-20.9 55.3l-64.6 77.6c-8.5 10.2-23.6 11.6-33.8 3.1s-11.6-23.6-3.1-33.8L405.1 206c-39.5-8.6-69.1-43.8-69.1-86c0-48.6 39.4-88 88-88s88 39.4 88 88zM143 39c9.4-9.4 24.6-9.4 33.9 0l96 96c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-55-55V456c0 13.3-10.7 24-24 24s-24-10.7-24-24V113.9L81 169c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l96-96zM456 312V432h24c13.3 0 24 10.7 24 24s-10.7 24-24 24H432 384c-13.3 0-24-10.7-24-24s10.7-24 24-24h24V345.3l-16.4 5.5c-12.6 4.2-26.2-2.6-30.4-15.2s2.6-26.2 15.2-30.4l48-16c7.3-2.4 15.4-1.2 21.6 3.3s10 11.8 10 19.5z">
						</path>
						</svg>
						</div>
						</i>
						<input data-v-03bbd932="" id="i-text-58" maxlength="false" type="number" autocomplete="off" enterkeyhint="next" class="f-input" value="1234">

					</label>

				</div>
			</div>

		</div>
	</body>
</html>