我有 MCQ 问题的代码。该功能是当我单击问题部分中的“插入新”时，它会显示一个问题和一个带有选项的输入字段。我们可以创建多个问题。
但我的问题是，当我单击“添加更多选项”按钮时，它将在第一个问题选项卡上添加选项，但是当我创建新问题而不关闭第一个问题，然后单击第一个问题的“添加新选项”按钮时，它会添加选项最新添加问题。
我希望如果我单击“添加更多选项”按钮，它将在同一问题上添加选项。
如何重现问题？
首先添加新问题并且不要关闭问题，然后单击“插入新”按钮，然后单击第一个问题的添加更多选项按钮，然后您就可以看到问题。如果您open it in jsfiddle，请调整窗口大小
$(document).ready(function() {
var i = 0;
var q = 4;
$('#insertnewqstnbtn').click(function() {
i++;
$('#newqstndiv').append('<div id="appenddiv' + i + '" class="ms-create-new-form"><h2 class= "ms-font-xl"> Add New Question <span><a href="javascript:;" id="' + i + '" class="closebtn"><a/></span></h2><div class="multichoice-question-btn"><div class="item"><span>Multiple Choice?</span><input type = "checkbox" id = "toggleaddqstn_' + i + '"><div class= "toggle"><label for="toggleaddqstn_' + i + '"><i></i></label></div></div></div><div class="ms-input-field-div"><input id="questiontxt' + i + '" type="text" placeholder="Enter question text here" class="ms-title-field question" /></div><div class="ms-form-first-group form-for-ans"><div class="ms-ans-text"><p>Answer</p></div><div class="ms-correct-text"><p>Correct?</p></div></div><div class="border-bottom-line-ans"></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '1"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 1 text" id="option1' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" id="checkboxn1' + i + '" name="checboxname' + i + '" class="cm-box"/><label for="checkboxn1' + i + '"></label></div></div></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '2"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 2 text" id="option2' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" id="checkboxn2' + i + '" name="checboxname' + i + '" class="cm-box"/><label for="checkboxn2' + i + '"></label></div></div></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '3"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 3 text" id="option3' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" id="checkboxn3' + i + '" name="checboxname' + i + '" class="cm-box"/><label for="checkboxn3' + i + '"></label></div></div></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '4"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 4 text" id="option4' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" name="checboxname' + i + '" id="checkboxn4' + i + '" class="cm-box"/><label for="checkboxn4' + i + '"></label></div></div></div><span class="add-filed"><a href="javascript:;" id="add-field_' + i + '"></a></span><div class="ms-pagin-div" id="rqdoptionsdiv"><div class="ms-pagin-text"><p>Required correct answer</p></div><div class="ms-pagin-num" id="correctOptNum"><span>2</span><span>3</span><span class="active">4</span></div></div><button id="addnewqstnCancelbtn" class="newcoursecancelbtn">Cancel</button><button id="addnewqstnbtn_' + i + '" class="ms-cm-button add-detail-btn createquestion" style="width:40%;">Create</button><label id="chkpointErrMsg"></label><div class="border-bottom-line mb-bottom-15"></div></div>');
var checkMultiChoice = $("#toggleaddqstn_" + i);
var addMoreBtn = $("#add-field_" + i);
addMoreBtn.click(function() {
var parentDiv = "#appenddiv" + i;
var lastDiv = ".ms-form-second-ground:last";
var addFieldSplit = $(this).attr('id');
var fieldSplit = addFieldSplit.split('_');
var fieldSplitFirst = fieldSplit[0];
var fieldSplitTwo = fieldSplit[1];
q++;
if (checkMultiChoice.prop("checked") == true) {
$(parentDiv + " " + ".ms-form-second-ground:last").after('<div class="ms-form-second-ground question-with-ans" id="option-field' + i + '' + q + '"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option ' + q + ' text" id="option' + q + '' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="checkbox" name="checboxname' + i + '" id="checkboxn' + q + '' + i + '" class="cm-box"/><label for="checkboxn' + q + '' + i + '"></label></div></div></div>');
} else if (checkMultiChoice.prop("checked") == false) {
$('<div class="ms-form-second-ground question-with-ans" id="option-field' + i + '' + q + '"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option ' + q + ' text" id="option' + q + '' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" name="checboxnamee' + i + '" id="checkboxn' + q + '' + i + '" class="cm-box"/><label for="checkboxn' + q + '' + i + '"></label></div></div></div>').insertAfter(parentDiv + " " + ".ms-form-second-ground:last");
}
});
var splitCheck = (checkMultiChoice.attr('id')).split("_");
var splicheckfirst = splitCheck[0];
var splichecksecond = splitCheck[1];
checkMultiChoice.click(function() {
if ((checkMultiChoice).prop("checked") == true) {
for (var input = 1; input <= q; input++) {
var btnOption = "checkboxn" + input + splichecksecond;
$("#" + btnOption).attr('type', 'checkbox');
}
} else if ((checkMultiChoice).prop("checked") == false) {
for (var input = 1; input <= q; input++) {
var btnOption = "checkboxn" + input + splichecksecond;
$("#" + btnOption).attr('type', 'radio');
}
}
});
$(document).on('click', '.closebtn', function() {
var button_id = $(this).attr("id");
$('#appenddiv' + button_id + '').remove();
});
//var questionAdd = 0;
$('.createquestion').click(function() {
//questionAdd++;
var id = this.id;
var split_id = id.split('_');
var text = split_id[0];
var bid = split_id[1];
var questionId = $("#questiontxt" + bid).val();
var ansFirst = $("#option1" + bid).val();
var ansSecond = $("#option2" + bid).val();
var ansThird = $("#option3" + bid).val();
var ansFourth = $("#option4" + bid).val();
$('#main-after-append').append('<div class="after-append" id="afterappendid' + i + '"><div class="d-flex-questions"><div class="m-question-2"><h3 class="ms-font-xl" id="qstnumber' + i + '">Question ' + i + '</h3><span>(Locate after page 1)</span></div><div class="multichoice-question-btn"><form style="width:100%;" class="ms-second-form"><div class="item"><span>Multiple Choice?</span><input type="checkbox" id="toggle_today_summary2" name="" value=""><div class="toggle"><label for="toggle_today_summary2"><i></i></label></div></div></form></div></div><h4 class="ms-font-xl"><input type="text" id="question' + i + '" value="' + questionId + '" class="question-a"></h4><form class="form-for-ans"><div class="ms-form-first-group"><div class="ms-ans-text"><p>Answer</p></div><div class="ms-correct-text"><p>Correct?</p></div></div><div class="border-bottom-line-ans"></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansFirst + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio" name="ans" value="everyone" /><label for="radio"></label></div></div></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansSecond + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio2" name="ans" value="Not me" /><label for="radio2"></label></div></div></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansThird + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio3" name="ans" value="My Manager" /><label for="radio3"></label></div></div></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansFourth + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio4" name="ans" value="My Manager" /><label for="radio4"></label></div></div></div></form></div><div class="border-bottom-line mb-bottom-15"></div></div>');
$("#appenddiv" + i).hide();
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newqstndiv"></div>
<button id="insertnewqstnbtn" class="ms-cm-button"> Insert New</button>最佳答案
我看了你的代码。问题是您在点击事件(addMoreBtn.click)中使用了 var i ，因此它始终引用创建的最新问题。您需要一种方法来跟踪事件处理程序适用于什么问题。
实现此目的的一种方法是将数据属性添加到 anchor 标记 (#appenddiv+i)。我在下面的代码片段中添加了一个数据属性(data-num)，我还更新了点击事件以使用数据属性而不是 i。
我还添加了评论以突出显示更改。请参阅下面的片段。
$(document).ready(function() {
var i = 0;
var q = 4;
$('#insertnewqstnbtn').click(function() {
i++;
// <a href="javascript:;" id="add-field_'+i+'" data-num="'+i+'"></a> added data-num attribute
$('#newqstndiv').append('<div id="appenddiv' + i + '" class="ms-create-new-form"><h2 class= "ms-font-xl"> Add New Question <span><a href="javascript:;" id="' + i + '" class="closebtn"><a/></span></h2><div class="multichoice-question-btn"><div class="item"><span>Multiple Choice?</span><input type = "checkbox" id = "toggleaddqstn_' + i + '"><div class= "toggle"><label for="toggleaddqstn_' + i + '"><i></i></label></div></div></div><div class="ms-input-field-div"><input id="questiontxt' + i + '" type="text" placeholder="Enter question text here" class="ms-title-field question" /></div><div class="ms-form-first-group form-for-ans"><div class="ms-ans-text"><p>Answer</p></div><div class="ms-correct-text"><p>Correct?</p></div></div><div class="border-bottom-line-ans"></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '1"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 1 text" id="option1' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" id="checkboxn1' + i + '" name="checboxname' + i + '" class="cm-box"/><label for="checkboxn1' + i + '"></label></div></div></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '2"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 2 text" id="option2' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" id="checkboxn2' + i + '" name="checboxname' + i + '" class="cm-box"/><label for="checkboxn2' + i + '"></label></div></div></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '3"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 3 text" id="option3' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" id="checkboxn3' + i + '" name="checboxname' + i + '" class="cm-box"/><label for="checkboxn3' + i + '"></label></div></div></div><div class="ms-form-second-ground question-with-ans" id="option-field' + i + '4"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option 4 text" id="option4' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" name="checboxname' + i + '" id="checkboxn4' + i + '" class="cm-box"/><label for="checkboxn4' + i + '"></label></div></div></div><span class="add-filed"><a href="javascript:;" id="add-field_' + i + '" data-num="' + i + '"></a></span><div class="ms-pagin-div" id="rqdoptionsdiv"><div class="ms-pagin-text"><p>Required correct answer</p></div><div class="ms-pagin-num" id="correctOptNum"><span>2</span><span>3</span><span class="active">4</span></div></div><button id="addnewqstnCancelbtn" class="newcoursecancelbtn">Cancel</button><button id="addnewqstnbtn_' + i + '" class="ms-cm-button add-detail-btn createquestion" style="width:40%;">Create</button><label id="chkpointErrMsg"></label><div class="border-bottom-line mb-bottom-15"></div></div>');
var checkMultiChoice = $("#toggleaddqstn_" + i);
var addMoreBtn = $("#add-field_" + i);
addMoreBtn.click(function() {
// changed var parentDiv = "#appenddiv" + i;
//to:
var parentDiv = "#appenddiv" + $(this).data("num");
var lastDiv = ".ms-form-second-ground:last";
// added r to count how many fields are in this question
var r = $(parentDiv + ' > [id^=option]').length+1 ;
var addFieldSplit = $(this).attr('id');
var fieldSplit = addFieldSplit.split('_');
var fieldSplitFirst = fieldSplit[0];
var fieldSplitTwo = fieldSplit[1];
q++;
if (checkMultiChoice.prop("checked") == true) {
$(parentDiv + ".ms-form-second-ground:last").after('<div class="ms-form-second-ground question-with-ans" id="option-field' + i + '' + r + '"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option ' + r + ' text" id="option' + r + '' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="checkbox" name="checboxname' + i + '" id="checkboxn' + r + '' + i + '" class="cm-box"/><label for="checkboxn' + r + '' + i + '"></label></div></div></div>');
} else if (checkMultiChoice.prop("checked") == false) {
$('<div class="ms-form-second-ground question-with-ans" id="option-field' + i + '' + r + '"><div class="ms-ans-text-2"><input type="text" placeholder="Enter Option ' + r + ' text" id="option' + r + '' + i + '" class="ms-title-field" /></div><div class="ms-check-icon chk"><div class="round"><input type="radio" name="checboxnamee' + i + '" id="checkboxn' + r + '' + i + '" class="cm-box"/><label for="checkboxn' + r + '' + i + '"></label></div></div></div>').insertAfter(parentDiv + " " + ".ms-form-second-ground:last");
}
});
var splitCheck = (checkMultiChoice.attr('id')).split("_");
var splicheckfirst = splitCheck[0];
var splichecksecond = splitCheck[1];
checkMultiChoice.click(function() {
if ((checkMultiChoice).prop("checked") == true) {
for (var input = 1; input <= q; input++) {
var btnOption = "checkboxn" + input + splichecksecond;
$("#" + btnOption).attr('type', 'checkbox');
}
} else if ((checkMultiChoice).prop("checked") == false) {
for (var input = 1; input <= q; input++) {
var btnOption = "checkboxn" + input + splichecksecond;
$("#" + btnOption).attr('type', 'radio');
}
}
});
$(document).on('click', '.closebtn', function() {
var button_id = $(this).attr("id");
$('#appenddiv' + button_id + '').remove();
});
//var questionAdd = 0;
$('.createquestion').click(function() {
//questionAdd++;
var id = this.id;
var split_id = id.split('_');
var text = split_id[0];
var bid = split_id[1];
var questionId = $("#questiontxt" + bid).val();
var ansFirst = $("#option1" + bid).val();
var ansSecond = $("#option2" + bid).val();
var ansThird = $("#option3" + bid).val();
var ansFourth = $("#option4" + bid).val();
$('#main-after-append').append('<div class="after-append" id="afterappendid' + i + '"><div class="d-flex-questions"><div class="m-question-2"><h3 class="ms-font-xl" id="qstnumber' + i + '">Question ' + i + '</h3><span>(Locate after page 1)</span></div><div class="multichoice-question-btn"><form style="width:100%;" class="ms-second-form"><div class="item"><span>Multiple Choice?</span><input type="checkbox" id="toggle_today_summary2" name="" value=""><div class="toggle"><label for="toggle_today_summary2"><i></i></label></div></div></form></div></div><h4 class="ms-font-xl"><input type="text" id="question' + i + '" value="' + questionId + '" class="question-a"></h4><form class="form-for-ans"><div class="ms-form-first-group"><div class="ms-ans-text"><p>Answer</p></div><div class="ms-correct-text"><p>Correct?</p></div></div><div class="border-bottom-line-ans"></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansFirst + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio" name="ans" value="everyone" /><label for="radio"></label></div></div></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansSecond + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio2" name="ans" value="Not me" /><label for="radio2"></label></div></div></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansThird + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio3" name="ans" value="My Manager" /><label for="radio3"></label></div></div></div><div class="ms-form-second-ground"><div class="ms-ans-text-2"><input type="text" value="' + ansFourth + '" id="ans' + i + '"/></div><div class="ms-check-icon"><div class="round"><input type="radio" id="radio4" name="ans" value="My Manager" /><label for="radio4"></label></div></div></div></form></div><div class="border-bottom-line mb-bottom-15"></div></div>');
$("#appenddiv" + i).hide();
});
});
});/* Page-specific styling */
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 0px;
/* bottom = footer height */
/** margin:0 0 40px;*/
font-family: 'Comfortaa', cursive;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 100%;
}
/*.padding {*/
/* padding: 15px;*/
/*}*/
#notification-popup.ms-MessageBanner {
position: absolute;
left: 0px;
bottom: 0px;
text-align: left;
height: inherit;
min-width: inherit;
}
#notification-popup .ms-MessageBanner-text {
margin: 0;
padding: 18px 15px;
min-width: inherit;
}
ul {
margin: 0;
padding: 0;
}
.ms-no-padding {
padding: 0px;
margin: 0px;
}
.ms-welcome__header {
padding: 20px;
padding-bottom: 5px;
padding-top: 0px;
display: -webkit-flex;
display: flex;
align-items: center;
-webkit-align-items: center;
justify-content: left;
-webkit-justify-content: left;
}
.ms-welcome__main {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
align-items: left;
-webkit-align-items: left;
}
.ms-welcome__main>h2 {
width: 100%;
text-align: center;
}
.ms-welcome__features {
list-style-type: none;
margin-top: 20px;
}
.ms-welcome__features.ms-List .ms-ListItem {
padding-bottom: 20px;
display: -webkit-flex;
display: flex;
}
.ms-welcome__features.ms-List .ms-ListItem>.ms-Icon {
margin-right: 10px;
}
.ms-welcome__action.ms-Button--hero {
margin-top: 30px;
}
.ms-Button.ms-Button--hero .ms-Button-label {
color: #0078d7;
}
.ms-create-new-form .ms-Button.ms-Button--hero:hover .ms-Button-label,
.ms-Button.ms-Button--hero:focus .ms-Button-label {
color: #005a9e;
cursor: pointer;
}
b {
font-weight: bold;
}
/** custom css **/
.ms-welcome__header h2,
.ms-section-first h2,
.ms-section-second h2,
.ms-section-sixth h2 {
font-size: 16px;
font-weight: 800;
margin: 20px 0px 5px 0px;
padding: 0px;
letter-spacing: 0.4px;
font-family: 'Comfortaa', cursive;
}
.ms-create-new-form h2,
.ms-section-fourth h2,
.ms-section-fifth h2 {
font-size: 16px;
font-weight: 800;
margin: 0px 0px 0px 0px;
padding: 0px;
padding-bottom: 10px;
letter-spacing: 0.4px;
font-family: 'Comfortaa', cursive;
}
.ms-create-new-form h2 {
position: relative;
}
.ms-section-fifth.mt-20 {
margin-top: 20px;
}
.ms-section-fifth .m-question-2 h3 {
font-size: 14px;
font-family: inherit;
margin: 0px;
padding-top: 10px;
font-weight: 700;
}
.ms-section-fifth h4 {
font-size: 14px;
font-family: inherit;
margin: 0px;
padding-top: 10px;
font-weight: 700;
line-height: 25px;
}
.ms-section-fifth .m-question-2 span {
font-size: 10px;
font-family: inherit;
}
.ms-section-first,
.ms-section-second,
.ms-section-third,
.ms-section-fourth,
.ms-section-fifth,
.ms-section-sixth,
.ms-section-seventh {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
padding: 0px 20px;
}
/**.ms-section-first, .ms-section-third, .ms-section-fifth, .ms-section-seventh {
background-color: #fff9fa;
}
*/
.ms-select-filed {
border-top: 0px;
border-left: 0px;
border-right: 0px;
font-size: 15px;
padding: 8px 0px;
width: 80%;
background-color: #fff9fa;
}
.d-flex-btn {
display: flex;
display: -webkit-flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
font-size: 13px;
}
.ms-section-first>p {
color: #000;
font-weight: 500;
font-size: 13px;
padding-bottom: 5px;
padding-top: 5px;
font-family: inherit;
float: left;
}
.ms-cm-button {
width: 50%;
border: 0px;
padding: 5px 20px;
font-size: 15px;
font-weight: 300;
background-color: #039be5;
color: #fff;
border-radius: 50px;
line-height: 25px;
margin: 20px 0px;
font-family: 'Comfortaa', cursive;
}
.ms-cm-button-update {
border: 0px;
padding: 5px 20px;
font-size: 15px;
font-weight: 300;
background-color: #039be5;
color: #fff;
border-radius: 50px;
line-height: 25px;
margin: 20px 0px;
font-family: 'Comfortaa', cursive;
}
.newcoursecancelbtn {
border: 0px;
padding: 5px 15px;
font-size: 15px;
font-weight: 300;
background-color: #333;
color: #fff;
border-radius: 50px;
line-height: 25px;
margin: 10px 0px 20px 0px;
font-family: 'Comfortaa', cursive;
}
.ms-table-first {
padding: 10px;
margin: 8px 0px 0px 0px;
text-align: left;
border: 1px solid #dadbdc;
text-align: center;
font-size: 13px;
font-weight: 600;
width: 100%;
}
.ms-table-first th {
padding: 5px 0px;
}
.ms-table-first tr td {
padding-left: 0px;
}
.ms-table-first tr td button {
margin-top: 15px;
margin-left: 0px;
}
.form-for-ans {
padding: 0px;
margin: 0px;
padding-left: 15px;
padding-right: 15px;
}
/** toogle css **/
.d-flex-questions {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item {
position: relative;
display: flex;
justify-content: flex-end;
}
.item span {
margin: 0 0 0 0px;
color: #000000;
font-size: 11px;
padding-right: 55px;
font-weight: 600;
}
.item input[type="checkbox"] {
font-size: 0px !important;
width: 0px;
height: 0px;
}
/**input[type="checkbox"] {
display: none;
}
*/
.toggle {
position: absolute;
top: 0;
bottom: 0;
right: 0px;
margin: auto;
width: 51px;
height: 25px;
}
.toggle label,
.toggle i {
box-sizing: border-box;
display: block;
background: #fff9fa;
}
.toggle label {
width: 51px;
height: 25px;
border-radius: 32px;
border: 1px solid #e5e5e5;
transition: all 0.30s ease;
-webkit-transform: all 0.30s ease;
-ms-transform: all 0.30s ease;
}
.toggle i {
position: absolute;
top: 2px;
left: 4px;
width: 20px;
height: 20px;
border-radius: 28px;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 3px 3px 0 rgba(0, 0, 0, 0.15);
background: #ffffff;
transition: all 0.3s cubic-bezier(0.275, -0.450, 0.725, 1.450);
-webkit-transition: all 0.3 cubic-bezier(0.0275, 0.725, 0.450)
}
input[type="checkbox"]:active+.toggle i {
width: 35px;
}
input[type="checkbox"]:active+.toggle label,
input[type="checkbox"]:checked+.toggle label {
background-color: #039be5;
}
input[type="checkbox"]:checked+.toggle i {
left: 26px;
}
input[type="checkbox"]:checked:active+.toggle label {
border: 16px solid #e5e5e5;
}
input[type="checkbox"]:checked:active+.toggle i {
left: 14px;
}
.ms-form-first-group {
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.ms-form-first-group p {
font-size: 13px;
font-weight: 600;
color: #000;
}
.ms-form-second-ground {
width: 100%;
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
-webkit-justify-content: space-between;
width: 100%
}
.ms-form-second-ground>.ms-ans-text-2 {
background-color: #fff;
width: 70%;
padding: 0px 5px;
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
}
.ms-form-second-ground>.ms-ans-text-2 input[type="text"] {
margin: 0px;
padding: 0px 10px;
line-height: 25px;
font-family: inherit;
font-size: 11px;
border: 1px solid #dadbdc;
border-radius: 5px;
font-weight: 400;
}
/** round icons **/
.round {
position: relative;
}
.round input[type="radio"]+label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: -20px;
position: absolute;
top: 0;
width: 28px;
}
.round input[type="checkbox"]+label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10% !important;
cursor: pointer;
height: 28px;
left: -20px;
position: absolute;
top: 0;
width: 28px;
}
.round label:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.round input[type="checkbox"] {
visibility: hidden;
}
.round input[type="checkbox"]:checked+label {
background-color: #039be5;
border-color: #66bb6a;
}
.round input[type="checkbox"]:checked+label:after {
opacity: 1;
}
.round input[type="radio"] {
visibility: hidden;
}
.round input[type="radio"]:checked+label {
background-color: #039be5;
border-color: #66bb6a;
}
.round input[type="radio"]:checked+label:after {
opacity: 1;
}
.ms-pagin-div {
display: flex;
display: -webkit-flex;
justify-content: space-between;
-webkit-justify-content: space-between;
align-items: center;
-webkit-align-items: center;
margin-top: 20px;
}
.ms-pagin-div p {
color: #000;
font-weight: 700;
font-size: 13px;
padding-bottom: 5px;
padding-top: 5px;
}
.ms-pagin-div span:first-child,
.ms-pagin-div span:last-child {
border: 1px solid #039be5;
padding: 2px 10px;
border-radius: 25px;
font-size: 13px;
color: #039be5;
}
.ms-pagin-div span.active {
background-color: #039be5;
color: #fff;
}
.ms-only-line {
font-size: 25px;
}
.ms-section-seventh {
padding: 0px 15px;
}
/** select css **/
.ms-dropdown {
border: 0px;
border: 1px solid #dadbdc;
padding: 10px 10px;
color: #333;
font-family: inherit;
font-weight: 500;
border-radius: 5px;
font-size: 13px;
}
.ms-dropdown:first-child {
margin-bottom: 10px;
}
/** custom css for signin*/
#login-msg .s-font-x {
margin-left: 10px;
margin-right: 10px;
font-family: 'Comfortaa', cursive;
display: block;
color: #000;
font-size: 17px;
font-weight: 500;
line-height: 23px;
}
#login-msg #sign-in {
padding-left: 10px;
}
.tg-s-txt {
display: flex;
justify-content: flex-end;
padding: 0px 10px;
}
.tg-s-txt p {
font-size: 14px;
}
.tg-s-txt,
.tg-s-txt p {
padding: 0px;
margin: 5px 10px 0px 10px;
}
.sign-out-btn {
background-color: #005a9e;
color: #fff;
padding: 4px 4px;
text-decoration: underline;
}
/** modal csss */
.m-all {
color: #000;
margin-left: 25px;
margin-right: 25px;
font-family: 'Comfortaa', cursive;
padding-top: 5px;
margin-top: 0px;
margin-bottom: 0px;
}
.f-group-f input,
.f-group-s input {
display: block;
width: 96%;
font-family: 'Comfortaa', cursive;
}
.f-group-f,
.f-group-s {
margin: 10px 0px;
width: 100%;
}
.f-group-f .label,
.f-group-s .label {
font-family: 'Comfortaa', cursive;
font-size: 17px;
font-weight: 500;
}
.f-group-f input,
.f-group-s input {
height: 30px;
border: 1px solid #dadbdc;
border-radius: 4px;
padding: 0px 10px;
font-family: 'Comfortaa', cursive;
font-size: 14px;
margin-top: 5px;
}
#loginButton {
background-color: #005a9e;
color: #fff;
padding: 8px 15px;
display: inline-block;
font-family: 'Comfortaa', cursive;
border: 0px solid #005a9e;
box-shadow: 0px 0px 0px 0px #005a9e;
font-size: 16px;
margin-top: 10px;
}
.s-acc {
background-color: #005a9e;
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 2px 10px;
margin: 10px 0px;
margin-bottom: 15px;
}
.s-acc h2 {
margin: 0px;
padding: 2px 0px 2px 0px;
font-size: 18px;
}
.login-google,
#googleButton {
background-color: #fff;
border: 0px solid #fff;
line-height: 0px;
}
.btn-s-g {
width: 100%;
text-align: center;
padding: 0px;
margin: 0px;
}
.btn-s-g p {
margin: 0px;
margin-top: 10px;
padding: 0px;
}
#googleButton span {
color: #000;
}
.d-flex {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
}
.d-flex img {
width: 22px;
margin-top: 0px;
margin-left: 5px;
}
#googleButton,
.login-google,
.btn-s-g {
margin: 0px !important;
padding: 0px !important;
}
/** add course details css */
.ms-input-field-div {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin-bottom: 8px;
}
.add-detail-btn {
margin-top: 10px;
}
.ms-input-field-div label {
width: 40%;
font-size: 13px;
}
.ms-input-field-div input,
.ms-input-field-div textarea,
.ms-input-field-div select {
width: 60%;
}
.ms-input-field-div input,
.ms-input-field-div textarea {
border: 1px solid #dadbdc;
border-radius: 5px;
}
.w-checkbox input[type="checkbox"] {
width: 15px !important;
}
.w-checkbox {
justify-content: flex-start !important;
}
.w-checkbox label {
width: 15px !important;
}
.ms-input-field-div input {
height: 25px;
font-family: inherit;
font-size: 11px;
padding-left: 5px;
}
.ms-create-new-form {
background-color: #fff;
box-shadow: 0px 0px 5px 0.5px #33333314;
padding: 8px 20px 0px 20px;
margin: 0px;
}
.mycheckbox {
display: block !important;
width: 15px !important;
height: 15px !important;
opacity: 1;
visibility: visible;
color: #ee4a42;
}
.border-bottom-line {
height: 1px;
background-color: #dadbdc;
width: 100%;
}
.border-bottom-line-ans {
height: 1px;
background-color: #dadbdc;
width: 100%;
margin-bottom: 10px;
}
.question-with-ans input {
margin: 0px;
padding: 0px 10px;
line-height: 25px;
font-family: inherit;
font-size: 11px;
border: 1px solid #dadbdc;
border-radius: 5px;
font-weight: 400;
}
.question-with-ans input::placeholder {
color: #828482;
}
.mb-bottom-15 {
margin-bottom: 15px;
}
/** close button css **/
.closebtn {
position: absolute;
right: 0px;
top: 0px;
width: 20px;
height: 20px;
opacity: 0.3;
}
.closebtn:hover {
opacity: 1;
}
.closebtn:before,
.closebtn:after {
position: absolute;
left: 15px;
content: ' ';
height: 15px;
width: 2px;
background-color: #333;
}
.closebtn:before {
transform: rotate(45deg);
}
.closebtn:after {
transform: rotate(-45deg);
}
/** add button **/
.add-filed {
position: relative;
display: flex;
width: 100%;
}
.add-filed a {
position: absolute;
right: 8px;
top: 4px;
width: 20px;
height: 20px;
opacity: 1;
background-color: #039be5;
border-radius: 50%;
}
.add-filed a:before,
.add-filed a:after {
position: absolute;
left: 9px;
top: 5px;
content: ' ';
height: 10px;
width: 2px;
background-color: #fff;
}
.add-filed a:before {
transform: rotate(90deg);
}
.question-a {
border: 0px solid #fff0;
font-size: 14px;
font-family: inherit;
font-weight: 700;
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content-main" class="ms-welcome__main" style="width: 25%;">
<!-- style="display: none;" -->
<div class="padding">
<!--add new question-->
<div class="ms-section-fifth" id="main-after-append"></div>
<div id="newqstndiv"></div>
<button id="insertnewqstnbtn" class="ms-cm-button"> Insert New</button>
<div class="ms-section-sixth">
<h2 class="ms-font-xl">Update Courses</h2>
</div>
<div class="ms-section-seventh">
<button class="ms-cm-button-update"> Update Course</button>
</div>
</div>
</div>关于javascript - MCQ 问题格式的 jQuery 和 JavaScript 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59352358/