# IC: Multiple Answer, Single Input

## In this example below you will see how to do a IC: Multiple Answer, Single Input with some HTML / CSS and Javascript

This awesome code was written by tswone, you can see more from this user in the personal repository.
You can find the original code on Codepen.io

#### Technologies

• HTML
• CSS
• JavaScript
``````<!DOCTYPE html>
<html lang="en" >

<meta charset="UTF-8">

<body>

<div class="container">
<div class="row">
<li><a href="#">Activity B</a></li>
<li>Question 2</li>
</ol>
</div>
<div class="row">
<div class="col-sm-8">
<textarea placeholder="Question text here." data-qtext="121" name="q" id="" cols="30" rows="10">In the Gizmo, graph y = –x2 – 5x. State the intercepts and vertex.

x-intercepts: {in:1}     y-intercept: {in:2}     vertex: {in:3}</textarea>
</div>
<div class="col-sm-4">
<a href="#" id="insert">Insert</a>
<div class="area">
<div class="cardy">
<div class="section form ">
<li>
<div class="input-group">
<input type="text" class="form-control" value="1">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Exact &nbsp;<span class="label label-primary">123</span> <span class="caret"></span></button>
<li><a href="#">Exact Match</a></li>
<li><a href="#">...</a></li>
<li><a href="#">Exact Match</a></li>
<li><a href="#">Contains</a></li>
</ul>
</div>
</div>
</li>
<li>
<div class="input-group">
<input type="text" class="form-control" value="2">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">...</button>
</div>
</div>
</li>
</ul>
</div>
<!--     <div class="section">
Filtered Input: <span class="results"></span>
<div class="check"></div>
</div>   -->
<div class="section">
<div class="input-layout">
<input type="text" required="" id="in1" name="test" id="password">
<span class="bar"></span>
<label>Test Input Here</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

<script  src="js/index.js"></script>

</body>

</html>
``````
``````
body,
button,
input,
select,
textarea {
font-family: "Open Sans", open-sans, sans-serif;
}
ul,
li {
list-style: none;
margin: 0;
}
li {
margin-bottom: 8px;
}
li .icn {
color: #ccc;
}
li.ok .icn {
color: green;
}
body {
background-color: #E4E4E4;
}
.container {
min-height: 900px;
}
background: none;
}
font-size: 130%;
}
[data-qtext] {
box-sizing: border-box;
width: 100%;
outline: none;
background: none;
border: none;
font-size: 28px;
}
[data-qtext]:hover {
background-color: #eee;
}
[data-qtext]:focus {
background-color: #eee;
}
.cardy {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
margin: 0 auto;
}
.cardy .section {
border-bottom: 1px solid #E6E6E6;
}
.cardy .section .title {
color: #666;
font-size: 15px;
margin-bottom: 10px;
}
.cardy .section:last-child {
border: none;
}
.cardy .caption {
text-transform: uppercase;
text-align: center;
font-size: 11px;
margin: -10px 0 0;
color: #41B7BF;
}
.input-layout {
position: relative;
margin-top: 28px;
}
.input-layout label {
color: #b8b5bd;
font-size: 18px;
font-weight: 400;
letter-spacing: .5px;
position: absolute;
pointer-events: none;
left: 0;
top: 2px;
transition: .2s ease all;
}
.input-layout input[type=text] {
display: inline-block;
font-weight: 400;
font-size: 26px;
color: #1E2431;
border: 0;
width: 100%;
height: 36px;
line-height: 17px;
transition: none;
margin-bottom: 9px;
}
.input-layout input[type=text]:focus {
outline: 0;
text-transform: none;
color: #1E2431;
}
.input-layout input[type=text]:focus ~ label,
.input-layout input[type=text]:valid ~ label {
top: -24px;
color: #A2AABD;
opacity: 1;
font-weight: 400;
font-size: 11px;
text-transform: uppercase;
}
.input-layout .bar {
position: relative;
display: block;
width: 100%;
}
.input-layout .bar:after,
.input-layout .bar:before {
content: '';
height: 1px;
width: 0;
bottom: 9px;
position: absolute;
background: #41B7BF;
transition: .2s ease all;
}
.input-layout .bar:before {
left: 50%;
}
.input-layout .bar:after {
right: 50%;
}
.input-layout input:focus ~ .bar:after,
.input-layout input:focus ~ .bar:before {
width: 50%;
}

``````
``````
(function() {

curTextArea = '';

jQuery.fn.extend({
insertAtCaret: function(myValue) {
return this.each(function(i) {
var endPos, scrollTop, sel, startPos;
if (document.selection) {
//For browsers like Internet Explorer
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
return this.focus();
} else if (this.selectionStart || this.selectionStart === '0') {
//For browsers like Firefox and Webkit based
startPos = this.selectionStart;
endPos = this.selectionEnd;
scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
return this.scrollTop = scrollTop;
} else {
this.value += myValue;
return this.focus();
}
});
}
});

c = 3;

console.log(curTextArea);

\$('[data-qtext]').on('focus', function() {
curTextArea = \$(this);
return console.log(curTextArea);
});

\$('#insert').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
return curTextArea.insertAtCaret('test');
});

refresh = function() {
});
};

// answers.push('(' + \$(@).val() + ')')
refresh();

return refresh();
});

});

// two numbers
// \D*(\d)\D+(\d)\D*
in1 = \$('#in1');

in1.on('keyup', function() {
var a, ai, check, i, j, k, l, len, len1, len2, m, matches, mi, ok, p, re, v;
p = '\\D*';
for (i = j = 0, len = answers.length; j < len; i = ++j) {
if (i > 0) {
p += '\\D+';
}
p += '(\\d+)';
}
p += '\\D*';
re = new RegExp(p);
// re = new RegExp('\\D*' + answers.join('\\D+') + '\\D*')
console.log(re);
v = \$(this).val();
matches = re.exec(v);
check = 'wrong';
ok = [];
if (matches && matches[0] === v) {

// console.log(matches[1] + ' and ' + matches[2])
ok = [];
console.log(matches);
for (ai = k = 0, len1 = answers.length; k < len1; ai = ++k) {
for (mi = l = 0, len2 = matches.length; l < len2; mi = ++l) {
m = matches[mi];
if (!ok[ai] && mi > 0) {
ok[ai] = m === a;
}
}
}
check = 'correct';
}
var fnc;
fnc = (ok[i] ? 'add' : 'remove') + 'Class';
return \$(this)[fnc]('ok');
});
\$('.results').text(ok);
return \$('.check').text(check);
});

}).call(this);