스크립트 내부에 여분필드 불러오기?
본문
오전에 우연찮게 발견한 퀴즈 소스 덕분에
하루종일 보드 스킨과 씨름하고 있습니다ㅋㅋ
이제 80% 정도 되어 가는데 마지막 부분.....
에서 막혀 버렸습니다....
var map = {};
var ax = ['0','red','mercedes','3.14','3'];
var answer = '';
var total = 0;
var ttl = 0;
퀴즈의 정답부분을 불러 오는 스크립트 입니다.
이곳에
var ax = ['0','red','mercedes','3.14','3'];
이 부분에 정답을 입력하고 연동이 되는 방식입니다.
저는 여분필드 9번(wr_9) 를 이용하여
view 페이지에서 이 스크립트를 불러 올오려 합니다.
그래서 무작정
var ax = ['0','<php echo $view['wr_9']>','mercedes','3.14','3'];
이렇게 적용을 하였 습니다.
무었이 문제인지... 먹통이 되어 버렸습니다....
혹시 스크립트(파일명.js) 내부에서 여분필드 호출 방법을 아시는 분
도움을 부탁 드립니다.
답변 5
// 스크립트.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>
알려 주신 방법으로 적용 결과 드디어 인식을 합니다^.^
그런데 산너머 산이 있네요.....
최종 정답 결과 부분에서..... 무조건 오답으로 표기가 되고있습니다...
제 예상으로는 이쯤 인거 같은데...
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;
}
여분필드 wr_9 값
<script src="스크립트.js"></script>
<script>
var ax = ['0','<?php echo $view['wr_9'] ?>','mercedes','3.14','3'];
</script>
<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>
view 파일에 있는
value 값을 서로 비교하여 결과를 보여 주는거 같은데... 음....
글쓰기 페이지 에서
wr_9 값을 red 로 입력하면 이게 정답으로 나와야 하는데... 무조건 오답으로 나와 보리네요.,...
진짜 산너머 산이네요.....
(참고로 value 값은 차후에 O X 값으로 고정 해서 하려구요~)
혹시 ? 여분필드 사용 하셨나요???
먹통은 문법오류때문입니다.
아래처럼..
<?php echo $view['wr_9']?>
이 부분을 ... 어떻게 수정 해야 할까요.... 방법을 몰라서.,....
위에 전체 소스 올려 드립니다 ...
소스 전체 내용 입니다......
-출처-
https://codepen.io/DVELOPR/pen/dpRqKg
<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>
.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;
}
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();
});
}
컨트롤 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
적용을 해 보았습니다.... 그런데..... <?php echo $view['wr_9']?> 이 부분을 인식 하지 못하네요.... 그냥 숫자나 문자를 넣으면 인식을 하는데....
작은 따옴표 때문에 생기는 문제가 아닐까요?
이렇게 해보면 어떤가요?
var ax = ["0","<?php echo $view['wr_9']; ?>","mercedes","3.14","3"];
이렇게 해보면 어떤가요?
답변을 작성하시기 전에 로그인 해주세요.
