푸들푸들

1211 Javascript 시험지 form 본문

구디아카데미/JAVA

1211 Javascript 시험지 form

COCO_develop 2024. 12. 11. 16:26

답 선택 -> 결과확인 버튼 -> 정답/오답 -> 점수+1, 버튼 비활성화

 

 

--> 반복문

<body class="container">
	<br>
	<div>
		점수 : <input type="number" id="score" value="0" readonly> / 15
	</div>
	<br>
	
	<div id="content">
	</div>

	<script>
		let tag = `

		`;
		
		let names = [
			~~~
		];
		
		$(names).each(function(index, item){
			$('#content').append(
				`
				<div class="card">
					<div class="card-header">
						<!-- 문제 -->
						\${index+1}.  \${item} 님 MBTI는?
					</div>
						
					<div class="card-body">
						<!-- 보기 -->
						<div class="row">
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="ISTJ">&nbsp;1.ISTJ(현실주의자)</div>
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="ISTP">&nbsp;2.ISTP(장인)</div>
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="INFJ">&nbsp;3.INFJ(옹호자)</div>
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="INTJ">&nbsp;4.INTJ(전략가)</div>
						</div>
						<div class="row">
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="ISFJ">&nbsp;5.ISFJ(수호자)</div>
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="ISFP">&nbsp;6.ISFP(모험가)</div>
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="INFP">&nbsp;7.INFP(중재자)</div>
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="INTP">&nbsp;8.INTP(논리술사)</div>
						</div>
						<div class="row">
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="ESTJ">&nbsp;9.ESTJ(경영자)</div>
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="ESFP">&nbsp;10.ESFP(연예인)</div>
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="ENFP">&nbsp;11.ENFP(활동가)</div>
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="ENTP">&nbsp;12.ENTP(변론가)</div>
						</div>
						<div class="row">
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="ESFJ">&nbsp;13.ESFJ(접정관)</div>
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="ESTP">&nbsp;14.ESTP(사업가)</div>
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="ENFJ">&nbsp;15.ENFJ(선도자)</div>
							<div class="col-sm-3"><input type="radio" class="q\${index+1}" name="q\${index+1}" value="ENTJ">&nbsp;16.ENTJ(통솔자)</div>
						</div>
						
					</div>
					<div class="card-footer">
						<!-- 결과 : 정답/오답 -->
						<input type="text" id="resultQ\${index+1}" readonly>
						<button type="button" id="btnQ\${index+1}">결과확인</button>
					</div>
				</div>
				<hr>
				`
			);
		});
		
        // 결과 확인
		$(names).each(function (index, item) {
			$('#btnQ'+(index+1)).click(function(){
				// 1) REST 호출
				$.ajax({
					url:'/mbti/'+(index+1)
					, method:'POST'
				})
				.done(function(result){
					// 2) 반환값과 체크값 비교
					if($('.q'+(index+1)+':checked').val() == result){
						// 3) 점수 반영
						$('#score').val(Number($('#score').val()) + 1);
						$('#resultQ'+(index+1)).val('정답');
					} else {
						$('#resultQ'+(index+1)).val('오답');
					}
				})
				.fail(function(){
					alert('답안 전송 실패')
				})
				// 4) 버튼 비활성화
				$('#btnQ'+(index+1)).attr('disabled',true);
			});
		});
	</script>
</body>

결과 확인 부분

'btnQ\${index+1}'

오류: jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #btnQ${index+1}

-> \${index+1}(템플릿 리터럴 문법)이 해석되지 않고 그대로 처리됨 - jQuery

--> '#btnQ'+(index+1) : 문자열 연결 연산자 사용

 

 

***

@Mapper
public interface MbtiMapper {
	String selectMbti(Integer no);
}
<mapper namespace="com.example.db1211.MbtiMapper">
	<select id="selectMbti" parameterType="Integer" resultType="String">
		SELECT mbti
		FROM mbti
		WHERE no = #{no}
	</select>
</mapper>
@Controller
public class MbtiController {
	@GetMapping("/mbti")
	public String mbti() {
		return "mbti";
	}
}
@RestController
public class MbtiRest {
	@Autowired MbtiMapper mbtiMapper;
	
	@PostMapping("/mbti/{no}")
	public String q1(@PathVariable Integer no) {
		return mbtiMapper.selectMbti(no);
	}
}

'구디아카데미 > JAVA' 카테고리의 다른 글

[Sakila] 통계 쿼리 연습  (1) 2024.12.12
1211 Javascript 중복 검사  (0) 2024.12.11
1211 Javascript, AJax, RestAPI select+조건  (0) 2024.12.11
1210 Javascript 퍼머링크, 차트  (0) 2024.12.10
1210 Javascript 코드 실행시간 설정, 유효성 검사  (0) 2024.12.10
'구디아카데미/JAVA' Related Articles more