스크립트 내부에 여분필드 불러오기? 채택완료
오전에 우연찮게 발견한 퀴즈 소스 덕분에
하루종일 보드 스킨과 씨름하고 있습니다ㅋㅋ
이제 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','','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
Back
Based on history... What is the ideal color for a Ferrari?
Red
Blue
Green
Purple
Which one of these car brands is made in Germany?
Honda
Ford
Mercedes
Ferrari
Which is the correct integer for Pi?
3
4
3.41
3.14
The letter 'C' is the nth number in the alphabet, choose the correct number.
1
2
3
4
Prev
Next
Submit
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
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 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 값으로 고정 해서 하려구요~)