오전에 우연찮게 발견한 퀴즈 소스 덕분에
하루종일 보드 스킨과 씨름하고 있습니다ㅋㅋ
이제 80% 정도 되어 가는데 마지막 부분.....
에서 막혀 버렸습니다....
Copy
var map = {}; var ax = ['0','red','mercedes','3.14','3']; var answer = ''; var total = 0; var ttl = 0;퀴즈의 정답부분을 불러 오는 스크립트 입니다.
이곳에
Copy
var ax = ['0','red','mercedes','3.14','3'];이 부분에 정답을 입력하고 연동이 되는 방식입니다.
저는 여분필드 9번(wr_9) 를 이용하여
view 페이지에서 이 스크립트를 불러 올오려 합니다.
그래서 무작정
Copy
var ax = ['0','<php echo $view['wr_9']>','mercedes','3.14','3'];이렇게 적용을 하였 습니다.
무었이 문제인지... 먹통이 되어 버렸습니다....
혹시 스크립트(파일명.js) 내부에서 여분필드 호출 방법을 아시는 분
도움을 부탁 드립니다.
|
답변 5개 / 댓글 5개
채택된 답변
+20 포인트
2017-08-24 (목) 17:51:31
// 스크립트.js
var ax = ['0','red','mercedes','3.14','3'];
=>
// var ax = ['0','red','mercedes','3.14','3']; // 주석처리
// view.skin.php
<script>
var ax = ['0','<?php echo $view['wr_9'] ?>','mercedes','3.14','3'];
</script>
<script src="스크립트.js"></script>
답변에 대한 댓글 3개
2017-08-24 (목) 18:12:45
2017-08-24 (목) 16:36:12
작은 따옴표 때문에 생기는 문제가 아닐까요?
이렇게 해보면 어떤가요?
var ax = ["0","","mercedes","3.14","3"];이렇게 해보면 어떤가요?
2017-08-24 (목) 16:19:49
컨트롤 f 로 var ax 부분 찾으시고
var ax = ['0','<?php echo $view['wr_9'];?>','mercedes','3.14','3'];
이렇게 하시면 됩니다
<php echo$view['wr_9']> 잘못된방법X
<?php echo $view['wr_9']?> 옳은 방법O
답변에 대한 댓글 1개
2017-08-24 (목) 16:28:04
적용을 해 보았습니다.... 그런데..... <?php echo $view['wr_9']?> 이 부분을 인식 하지 못하네요.... 그냥 숫자나 문자를 넣으면 인식을 하는데....
2017-08-24 (목) 16:08:37
소스 전체 내용 입니다......
-출처-
https://codepen.io/DVELOPR/pen/dpRqKg
Copy
<div class="container"> <div class="col-sm-12"> <div class="mm-survey"> <div class="mm-survey-progress"> <div class="mm-survey-progress-bar mm-progress"></div> </div> <div class="mm-survey-results"> <div class="mm-survey-results-container"> <h3 class="mm-survey-results-score"></h3> <ul class="mm-survey-results-list"></ul> </div> <div class="mm-survey-results-controller"> <div class="mm-back-btn"> <button>Back</button> </div> </div> </div> <div class="mm-survey-bottom"> <div class="mm-survey-container"> <div class="mm-survey-page active" data-page="1"> <div class="mm-survery-content"> <div class="mm-survey-question"> <p>Based on history... What is the ideal color for a Ferrari?</p> </div> <div class="mm-survey-item"> <input type="radio" id="radio01" data-item="1" name="radio1" value="red" /> <label for="radio01"><span></span><p>Red</p></label> </div> <div class="mm-survey-item"> <input type="radio" id="radio02" data-item="1" name="radio1" value="blue" /> <label for="radio02"><span></span><p>Blue</p></label> </div> <div class="mm-survey-item"> <input type="radio" id="radio03" data-item="1" name="radio1" value="green" /> <label for="radio03"><span></span><p>Green</p></label> </div> <div class="mm-survey-item"> <input type="radio" id="radio04" data-item="1" name="radio1" value="purple" /> <label for="radio04"><span></span><p>Purple</p></label> </div> </div> </div> <div class="mm-survey-page" data-page="2"> <div class="mm-survery-content"> <div class="mm-survey-question"> <p>Which one of these car brands is made in Germany?</p> </div> <div class="mm-survey-item"> <input type="radio" id="radio05" data-item="2" name="radio2" value="honda" /> <label for="radio05"><span></span><p>Honda</p></label> </div> <div class="mm-survey-item"> <input type="radio" id="radio06" data-item="2" name="radio2" value="ford" /> <label for="radio06"><span></span><p>Ford</p></label> </div> <div class="mm-survey-item"> <input type="radio" id="radio07" data-item="2" name="radio2" value="mercedes" /> <label for="radio07"><span></span><p>Mercedes</p></label> </div> <div class="mm-survey-item"> <input type="radio" id="radio08" data-item="2" name="radio2" value="ferrari" /> <label for="radio08"><span></span><p>Ferrari</p></label> </div> </div> </div> <div class="mm-survey-page" data-page="3"> <div class="mm-survery-content"> <div class="mm-survey-question"> <p>Which is the correct integer for Pi?</p> </div> <div class="mm-survey-item"> <input type="radio" id="radio09" data-item="3" name="radio3" value="3" /> <label for="radio09"><span></span><p>3</p></label> </div> <div class="mm-survey-item"> <input type="radio" id="radio10" data-item="3" name="radio3" value="4" /> <label for="radio10"><span></span><p>4</p></label> </div> <div class="mm-survey-item"> <input type="radio" id="radio11" data-item="3" name="radio3" value="3.41" /> <label for="radio11"><span></span><p>3.41</p></label> </div> <div class="mm-survey-item"> <input type="radio" id="radio12" data-item="3" name="radio3" value="3.14" /> <label for="radio12"><span></span><p>3.14</p></label> </div> </div> </div> <div class="mm-survey-page" data-page="4"> <div class="mm-survery-content"> <div class="mm-survey-question"> <p>The letter 'C' is the nth number in the alphabet, choose the correct number.</p> </div> <div class="mm-survey-item"> <input type="radio" id="radio13" data-item="4" name="radio4" value="1" /> <label for="radio13"><span></span><p>1</p></label> </div> <div class="mm-survey-item"> <input type="radio" id="radio14" data-item="4" name="radio4" value="2" /> <label for="radio14"><span></span><p>2</p></label> </div> <div class="mm-survey-item"> <input type="radio" id="radio15" data-item="4" name="radio4" value="3" /> <label for="radio15"><span></span><p>3</p></label> </div> <div class="mm-survey-item"> <input type="radio" id="radio16" data-item="4" name="radio4" value="4" /> <label for="radio16"><span></span><p>4</p></label> </div> </div> </div> <!-- <div class="mm-survey-page" data-page="5"> <div class="mm-survery-content"> </div> </div> <div class="mm-survey-page" data-page="6"> <div class="mm-survery-content"> </div> </div> <div class="mm-survey-page" data-page="7"> <div class="mm-survery-content"> </div> </div> --> </div> <div class="mm-survey-controller"> <div class="mm-prev-btn"> <button>Prev</button> </div> <div class="mm-next-btn"> <button disabled="true">Next</button> </div> <div class="mm-finish-btn"> <button>Submit</button> </div> </div> </div> </div> </div> </div>
Copy
.mm-survey { margin-top: 75px; margin-bottom: 50px;}.mm-survey-container { width: 100%; min-height: 600px; background: #fafafa;}.mm-survey-results-container { width: 100%; min-height: 600px; background: #fafafa;}.mm-survey-page { display: none; font-family: 'Raleway'; font-weight: 100; padding: 40px;}.mm-survey-page.active { display: block;}.mm-survey-controller { position: relative; height: 60px; background: #333; padding: 12px 14px;}.mm-survey-results-controller { position: relative; height: 60px; background: #333; padding: 12px 14px;}.mm-back-btn { display: inline-block; position: relative; float: left;}.mm-prev-btn { display: inline-block; position: relative; float: left;}.mm-next-btn { display: inline-block; opacity: 0.25; position: relative; float: right;}.mm-finish-btn { display: none; position: relative; float: right;}.mm-finish-btn button { background: #3DD2AF !important; color: #fff;}.mm-survey-controller button { background: #fff; border: none; padding: 8px 18px; font-family: 'Raleway'; font-weight: 300;}.mm-survey-results-controller button { background: #fff; border: none; padding: 8px 18px;}.mm-survey-progress { width: 100%; height: 30px; background: #f5f5f5; overflow: hidden;}.mm-progress { transition: width 0.5s ease-in-out;}.mm-survey-progress-bar { height: 30px; width: 0%; background: linear-gradient(to left, #4CB8C4, #3CD3AD);}.mm-survey-q { list-style-type: none; padding: 0px;}.mm-survey-q li { display: block; /*padding: 20px 0px;*/ margin-bottom: 10px; width: 100%; background: #fff;}.mm-survey-q li input { width: 100%;}.mm-survery-content label { width: 100%; padding: 10px 10px; margin: 0px !important;}.mm-survery-content label:hover { cursor: pointer;}.mm-survey-question { min-height: 100px;}.mm-survey-question p { font-size: 22px; font-weight: 200; margin-bottom: 20px; line-height: 40px;}.mm-survery-content label p { display: inline-block; position: relative; top: 2px; left: 5px; margin: 0px;}input[type="radio"] { display: none;}input[type="radio"] + label { color: #292321; font-family: 'Raleway'; font-weight: 300; font-size: 16px;}input[type="radio"] + label span { display: inline-block; width: 30px; height: 30px; margin: 2px 4px 0 0; vertical-align: middle; cursor: pointer; -moz-border-radius: 50%; border-radius: 50%;}input[type="radio"] + label span { background-color: #333;}input[type="radio"]:checked + label span { border: 2px solid #3DD2AF; background: transparent;}input[type="radio"] + label span,input[type="radio"]:checked + label span { -webkit-transition: background-color 0.20s ease-in-out; -o-transition: background-color 0.20s ease-in-out; -moz-transition: background-color 0.20s ease-in-out; transition: background-color 0.20s ease-in-out;}.mm-survey-item { background: #fff; margin-bottom: 15px; border-bottom: 1px solid rgba(33,33,33,0.15); border-radius: 0px 0px 4px 4px;}.mm-prev-btn button:focus, .mm-next-btn button:focus, .mm-finish-btn button:focus { outline: none; border: none;}.mm-survey.okay .mm-next-btn { display: inline-block; opacity: 1;}.mm-finish-btn.active { display: inline-block;}.mm-survey-results { display: none;}.mm-survey-results-score { margin: 0px; padding: 0px; padding-top: 40px; padding-bottom: 40px; text-align: center; font-size: 80px; font-family: 'Raleway'; font-weight: 600; letter-spacing: -6px;}.mm-survey-results-list { list-style-type: none; padding: 0px 15px; margin: 0px;}.mm-survey-results-item { color: #fff; margin-top: 10px; padding: 15px 15px 15px 0px; font-family: 'Raleway'; font-weight: 300;}.mm-survey-results-item.correct { background: linear-gradient(to left, #4CB8C4, #3CD3AD);}.mm-survey-results-item.incorrect { background: linear-gradient(to left, #d33c62, #dc1144);}.mm-item-number { height: 40px; position: relative; padding: 17px; background: #333; color: #fff;}.mm-item-info { float: right;}
Copy
jQuery('.mm-prev-btn').hide(); var x; var count; var current; var percent; var z = []; init(); getCurrentSlide(); goToNext(); goToPrev(); getCount(); // checkStatus(); // buttonConfig(); buildStatus(); deliverStatus(); submitData(); goBack(); function init() { jQuery('.mm-survey-container .mm-survey-page').each(function() { var item; var page; item = jQuery(this); page = item.data('page'); item.addClass('mm-page-'+page); //item.html(page); }); } function getCount() { count = jQuery('.mm-survey-page').length; return count; } function goToNext() { jQuery('.mm-next-btn').on('click', function() { goToSlide(x); getCount(); current = x + 1; var g = current/count; buildProgress(g); var y = (count + 1); getButtons(); jQuery('.mm-survey-page').removeClass('active'); jQuery('.mm-page-'+current).addClass('active'); getCurrentSlide(); checkStatus(); if( jQuery('.mm-page-'+count).hasClass('active') ){ if( jQuery('.mm-page-'+count).hasClass('pass') ) { jQuery('.mm-finish-btn').addClass('active'); } else { jQuery('.mm-page-'+count+' .mm-survery-content .mm-survey-item').on('click', function() { jQuery('.mm-finish-btn').addClass('active'); }); } } else { jQuery('.mm-finish-btn').removeClass('active'); if( jQuery('.mm-page-'+current).hasClass('pass') ) { jQuery('.mm-survey-container').addClass('good'); jQuery('.mm-survey').addClass('okay'); } else { jQuery('.mm-survey-container').removeClass('good'); jQuery('.mm-survey').removeClass('okay'); } } buttonConfig(); }); } function goToPrev() { jQuery('.mm-prev-btn').on('click', function() { goToSlide(x); getCount(); current = (x - 1); var g = current/count; buildProgress(g); var y = count; getButtons(); jQuery('.mm-survey-page').removeClass('active'); jQuery('.mm-page-'+current).addClass('active'); getCurrentSlide(); checkStatus(); jQuery('.mm-finish-btn').removeClass('active'); if( jQuery('.mm-page-'+current).hasClass('pass') ) { jQuery('.mm-survey-container').addClass('good'); jQuery('.mm-survey').addClass('okay'); } else { jQuery('.mm-survey-container').removeClass('good'); jQuery('.mm-survey').removeClass('okay'); } buttonConfig(); }); } function buildProgress(g) { if(g > 1){ g = g - 1; } else if (g === 0) { g = 1; } g = g * 100; jQuery('.mm-survey-progress-bar').css({ 'width' : g+'%' }); } function goToSlide(x) { return x; } function getCurrentSlide() { jQuery('.mm-survey-page').each(function() { var item; item = jQuery(this); if( jQuery(item).hasClass('active') ) { x = item.data('page'); } else { } return x; }); } function getButtons() { if(current === 0) { current = y; } if(current === count) { jQuery('.mm-next-btn').hide(); } else if(current === 1) { jQuery('.mm-prev-btn').hide(); } else { jQuery('.mm-next-btn').show(); jQuery('.mm-prev-btn').show(); } } jQuery('.mm-survey-q li input').each(function() { var item; item = jQuery(this); jQuery(item).on('click', function() { if( jQuery('input:checked').length > 0 ) { // console.log(item.val()); jQuery('label').parent().removeClass('active'); item.closest( 'li' ).addClass('active'); } else { // } }); }); percent = (x/count) * 100; jQuery('.mm-survey-progress-bar').css({ 'width' : percent+'%' }); function checkStatus() { jQuery('.mm-survery-content .mm-survey-item').on('click', function() { var item; item = jQuery(this); item.closest('.mm-survey-page').addClass('pass'); }); } function buildStatus() { jQuery('.mm-survery-content .mm-survey-item').on('click', function() { var item; item = jQuery(this); item.addClass('bingo'); item.closest('.mm-survey-page').addClass('pass'); jQuery('.mm-survey-container').addClass('good'); }); } function deliverStatus() { jQuery('.mm-survey-item').on('click', function() { if( jQuery('.mm-survey-container').hasClass('good') ){ jQuery('.mm-survey').addClass('okay'); } else { jQuery('.mm-survey').removeClass('okay'); } buttonConfig(); }); } function lastPage() { if( jQuery('.mm-next-btn').hasClass('cool') ) { alert('cool'); } } function buttonConfig() { if( jQuery('.mm-survey').hasClass('okay') ) { jQuery('.mm-next-btn button').prop('disabled', false); } else { jQuery('.mm-next-btn button').prop('disabled', true); } } function submitData() { jQuery('.mm-finish-btn').on('click', function() { collectData(); jQuery('.mm-survey-bottom').slideUp(); jQuery('.mm-survey-results').slideDown(); }); } function collectData() { var map = {}; var ax = ['0','red','mercedes','3.14','3']; var answer = ''; var total = 0; var ttl = 0; var g; var c = 0; jQuery('.mm-survey-item input:checked').each(function(index, val) { var item; var data; var name; var n; item = jQuery(this); data = item.val(); name = item.data('item'); n = parseInt(data); total += n; map[name] = data; }); jQuery('.mm-survey-results-container .mm-survey-results-list').html(''); for (i = 1; i <= count; i++) { var t = {}; var m = {}; answer += map[i] + '<br>'; if( map[i] === ax[i]) { g = map[i]; p = 'correct'; c = 1; } else { g = map[i]; p = 'incorrect'; c = 0; } jQuery('.mm-survey-results-list').append('<li class="mm-survey-results-item '+p+'"><span class="mm-item-number">'+i+'</span><span class="mm-item-info">'+g+' - '+p+'</span></li>'); m[i] = c; ttl += m[i]; } var results; results = ( ( ttl / count ) * 100 ).toFixed(0); jQuery('.mm-survey-results-score').html( results + '%' ); } function goBack() { jQuery('.mm-back-btn').on('click', function() { jQuery('.mm-survey-bottom').slideDown(); jQuery('.mm-survey-results').slideUp(); }); }
2017-08-24 (목) 15:35:51
먹통은 문법오류때문입니다.
아래처럼..
<?php echo $view['wr_9']?>
답변에 대한 댓글 1개
2017-08-24 (목) 16:10:21
이 부분을 ... 어떻게 수정 해야 할까요.... 방법을 몰라서.,....
위에 전체 소스 올려 드립니다 ...
위에 전체 소스 올려 드립니다 ...
답변을 작성하려면 로그인이 필요합니다.
그런데 산너머 산이 있네요.....
최종 정답 결과 부분에서..... 무조건 오답으로 표기가 되고있습니다...
제 예상으로는 이쯤 인거 같은데...
[CODE]
jQuery('.mm-survey-results-container .mm-survey-results-list').html('');
for (i = 1; i <= count; i++) {
var t = {};
var m = {};
answer += map[i] + '<br>';
if( map[i] === ax[i]) {
g = map[i];
p = 'correct';
c = 1;
}
else {
g = map[i];
p = 'incorrect';
c = 0;
}
[/CODE]
여분필드 wr_9 값
[code]
<script src="스크립트.js"></script>
<script>
var ax = ['0','<?php echo $view['wr_9'] ?>','mercedes','3.14','3'];
</script>
[/code]
[code]
<div class="mm-survey-item">
<input type="radio" id="radio01" data-item="1" name="radio1" value="red" />
<label for="radio01"><span></span><p>Red</p></label>
</div>
<div class="mm-survey-item">
<input type="radio" id="radio02" data-item="1" name="radio1" value="blue" />
<label for="radio02"><span></span><p>Blue</p></label>
</div>
<div class="mm-survey-item">
<input type="radio" id="radio03" data-item="1" name="radio1" value="green" />
<label for="radio03"><span></span><p>Green</p></label>
</div>
<div class="mm-survey-item">
<input type="radio" id="radio04" data-item="1" name="radio1" value="purple" />
<label for="radio04"><span></span><p>Purple</p></label>
</div>
[/code]
view 파일에 있는
value 값을 서로 비교하여 결과를 보여 주는거 같은데... 음....
글쓰기 페이지 에서
wr_9 값을 red 로 입력하면 이게 정답으로 나와야 하는데... 무조건 오답으로 나와 보리네요.,...
진짜 산너머 산이네요.....
(참고로 value 값은 차후에 O X 값으로 고정 해서 하려구요~)