스크립트 내부에 여분필드 불러오기? 채택완료
오전에 우연찮게 발견한 퀴즈 소스 덕분에
하루종일 보드 스킨과 씨름하고 있습니다ㅋㅋ
이제 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개
채택된 답변
+20 포인트
8년 전
// 스크립트.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개
8년 전
댓글을 작성하려면 로그인이 필요합니다.
8년 전
작은 따옴표 때문에 생기는 문제가 아닐까요?
이렇게 해보면 어떤가요?
var ax = ["0","","mercedes","3.14","3"];이렇게 해보면 어떤가요?
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
8년 전
컨트롤 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개
8년 전
적용을 해 보았습니다.... 그런데..... <?php echo $view['wr_9']?> 이 부분을 인식 하지 못하네요.... 그냥 숫자나 문자를 넣으면 인식을 하는데....
댓글을 작성하려면 로그인이 필요합니다.
8년 전
소스 전체 내용 입니다......
-출처-
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(); }); }
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
그런데 산너머 산이 있네요.....
최종 정답 결과 부분에서..... 무조건 오답으로 표기가 되고있습니다...
제 예상으로는 이쯤 인거 같은데...
[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 값으로 고정 해서 하려구요~)