Skip to content

Instantly share code, notes, and snippets.

@farfromunique

farfromunique/form.html

Created May 18, 2014 23:11
Show Gist options
  • Save farfromunique/35a5d6006e8d5690ca4d to your computer and use it in GitHub Desktop.
Save farfromunique/35a5d6006e8d5690ca4d to your computer and use it in GitHub Desktop.
Download ZIP
FillableForm
Raw
form.html
<html>
<head>
<meta charset="UTF-8">
<style media="screen" type="text/css">
// This is typically an external file that I may not use all of on this page.
/* Basic elements */
div {
position: relative;
}
h1 {
text-align: center;
font-size: 60;
margin: 5;
}
input[type=text] {
background: beige;
border: solid 1px;
position: absolute;
right: 5px;
text-align: center;
}
/* Dots */
input[type=checkbox] {
visibility: hidden;
}
.dots {
width: 20px;
height: 20px;
background: #000;
display: inline-block;
margin: 1px auto;
-webkit-border-radius: 15px;
border-radius: 15px;
position: relative;
}
.dots label {
cursor: pointer;
position: absolute;
width: 14px;
height: 14px;
-webkit-border-radius: 15px;
border-radius: 15px;
left: 3px;
top: 3px;
background: #fff;
}
.dots label:after {
opacity: 0;
content: '';
position: absolute;
width: 12px;
height: 12px;
background: #000;
-webkit-border-radius: 15px;
border-radius: 15px;
top: 1px;
left: 1px;
}
.dots label:hover::after {
opacity: 0.75;
}
.dots input[type=checkbox]:checked + label:after {
opacity: 1;
}
.dots input[type=checkbox]:checked:disabled + label:after {
background: #999;
content: '';
}
.dots input[type=checkbox]:disabled + label:after {
background-image: url('noDot.png');
content: '';
}
/* bloodPool */
.bloodPool {
width: 20px;
height: 20px;
background: black;
position: relative;
display: inline-block;
margin-top: 3px;
}
.bloodPool label {
cursor: pointer;
position: absolute;
width: 16px;
height: 16px;
left: 2px;
top: 2px;
background: white;
}
.bloodPool label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 14;
height: 14;
background: #000000;
top: 1;
left: 1;
}
.bloodPool label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.bloodPool input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
/* Character Sheet sections */
#text1 {
text-align: left;
}
#text2 {
text-align: left;
}
#text3 {
text-align: left;
}
#charSheet {
width: 930px;
border: 1px black solid;
}
.section {
position: relative;
width: 930px;
display: inline-block;
text-align: center;
font-size: large;
font-weight: bold;
margin: 5px 0 10px 0;
padding-top: 5px;
border: black solid;
border-width: 2px 0 0 0;
}
.lefty {
width: 300;
position: relative;
left: 10;
top: 0;
float: left;
text-align: center;
font-size: initial;
font-weight: bold;
}
.lefty div {
text-align: left;
font-weight: normal;
}
.centery {
width: 300;
position: relative;
left: 20;
top: 0;
float: left;
text-align: center;
font-size: initial;
font-weight: bold;
}
.centery div {
text-align: left;
font-weight: normal;
}
.righty {
width: 300;
position: relative;
left: 30;
top: 0;
float: left;
text-align: center;
font-size: initial;
font-weight: bold;
}
.righty div {
text-align: left;
font-weight: normal;
}
#human {
text-align: center;
font-weight: bold;
height: 40px;
}
#willp {
text-align: center;
font-weight: bold;
height: 40px;
}
#bloodPool {
text-align: center;
font-weight: bold;
height: 130px;
}
.checks {
position: absolute;
left: 30;
}
.checky {
margin-bottom: 30px;
}
.container {
display: inline-flex;
right: 5;
position: absolute;
}
.attr {
height: 20;
margin: 5;
}
#phases {
margin-right: -1px;
margin-left: auto;
background-color: darkblue;
width: 250;
position: fixed;
z-index: 50;
top: 35;
color: white;
padding: 40px;
}
#phasesName {
position: relative;
left: -93;
font-weight: bold;
top: 100;
display: inline-block;
cursor: default;
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#phasesBody {
left: -15px;
top: -50px;
width: 275px;
display: none;
}
.current {
background-color: darkslateblue;
padding: 5;
}
.current div {
display: block;
}
.next {
color: grey;
}
.next div {
display: none;
}
.previous {
color: grey;
}
.previous div {
display: none;
}
#dotCounter {
display: none;
color: red;
font-weight: bold;
font-size: 48;
position: absolute;
background-color: fff;
z-index: 25;
}
li {
cursor: pointer;
}
#freebiePoints {
right: 75px;
width: 50px;
}
#freebieUpdate {
margin-top: 2px;
margin-bottom: 2px;
border-top-width: 1px;
border-bottom-width: 1px;
right: 10px;
position: absolute;
}
/* Print styles */
.plain {
font-weight: normal;
text-align: right;
position: absolute;
right: 10;
</style>
<title>Freebies / XP checker for V:tM characters</title>
<script type="text/javascript">
// This is typically an external file that I may not use all of on this page.
function addEventToID(selector, eventType, functionText) {
var commandText;
if (!window[selector]) { return false; };
commandText = "document.getElementById('" + selector;
eventType = eventType.toLowerCase();
switch (eventType) {
case "click":
commandText = commandText + "').onclick";
break;
case "load":
commandText = commandText + "').onload";
break;
case "change":
commandText = commandText + "').onchange";
break;
case "mouseover":
commandText = commandText + "').onmouseover";
break;
case "mouseout":
commandText = commandText + "').onmouseout";
break;
case "submit":
commandText = commandText + "').onsubmit";
break;
case "doubleclick":
commandText = commandText + "').ondblclick";
break;
/* invalid input handler */
default:
alert("Invalid eventType provided. Aborting!");
return;
}
commandText = commandText + " = function () { " + functionText + "};";
eval(commandText);
}
function removeAllMyEventListeners(id) {
id.onclick = "";
id.onload = "";
id.onchange = "";
id.onmouseover = "";
id.onmouseout = "";
id.onsubmit = "";
id.ondblclick = "";
}
function changeFirstCharacters(id, newText, charactersToChange) {
return 'document.getElementById(\"' + id + '\").innerHTML = ' + newText + ' \+ document.getElementById(\"' + id + '\").innerHTML.substr(' + charactersToChange + ', document.getElementById(\"' + id + '\").innerHTML.length \-' + charactersToChange + ')';
}
</script>
<script type="text/javascript">
// This is typically an external file that I may not use all of on this page.
var abort;
var stepName = "Step00";
var clan;
var flown;
/* Functional stuff */
function disableDotsInGroup(groupName) /* str, dex, etc */ {
if (groupName == 'All') /* global disable button */ {
var allDots = document.getElementsByClassName('dot');
for (var i=0;i<allDots.length;i++) {
allDots[i].disabled = true;
};
} else if (groupName == 'bloodPool') {
var blood = document.getElementsByClassName('blood');
for (var i=0;i<blood.length;i++) {
blood[i].disabled = true;
}
} else {
var dots = [];
dots[0] = document.getElementById(groupName+1)
dots[1] = document.getElementById(groupName+2)
dots[2] = document.getElementById(groupName+3)
dots[3] = document.getElementById(groupName+4)
dots[4] = document.getElementById(groupName+5)
for (i=0;i<5;i++) {
dots[i].disabled = true;
};
};
}
function enableDotsInGroup(groupName, enable1, enable2, enable3, enable4, enable5) /* enableN are boolean */ {
var dots = [];
dots[0] = document.getElementById(groupName+1)
dots[1] = document.getElementById(groupName+2)
dots[2] = document.getElementById(groupName+3)
dots[3] = document.getElementById(groupName+4)
dots[4] = document.getElementById(groupName+5)
if (enable1) { dots[0].disabled = false; }
if (enable2) { dots[1].disabled = false; }
if (enable3) { dots[2].disabled = false; }
if (enable4) { dots[3].disabled = false; }
if (enable5) { dots[4].disabled = false; }
}
function disableDotsInMetaGroup(metaGroup) /* physical, mental, etc */ {
switch (metaGroup) {
case "Physical":
disableDotsInGroup("stren");
disableDotsInGroup("dexte");
disableDotsInGroup("stami");
break;
case "Social":
disableDotsInGroup("chari");
disableDotsInGroup("manip");
disableDotsInGroup("appea");
break;
case "Mental":
disableDotsInGroup("perce");
disableDotsInGroup("intel");
disableDotsInGroup("wits");
break;
case "Talents":
disableDotsInGroup("alert");
disableDotsInGroup("athle");
disableDotsInGroup("brawl");
disableDotsInGroup("dodge");
disableDotsInGroup("empat");
disableDotsInGroup("expre");
disableDotsInGroup("intim");
disableDotsInGroup("leade");
disableDotsInGroup("stree");
disableDotsInGroup("subte");
break;
case "Skills":
disableDotsInGroup("anima");
disableDotsInGroup("craft");
disableDotsInGroup("drive");
disableDotsInGroup("etiqu");
disableDotsInGroup("firea");
disableDotsInGroup("melee");
disableDotsInGroup("perfo");
disableDotsInGroup("secur");
disableDotsInGroup("steal");
disableDotsInGroup("survi");
break;
case "Knowledges":
disableDotsInGroup("acade");
disableDotsInGroup("compu");
disableDotsInGroup("finan");
disableDotsInGroup("inves");
disableDotsInGroup("law");
disableDotsInGroup("lingu");
disableDotsInGroup("medic");
disableDotsInGroup("occul");
disableDotsInGroup("polit");
disableDotsInGroup("scien");
break;
case "In-Clan":
disableDotsInGroup("in1");
disableDotsInGroup("in2");
disableDotsInGroup("in3");
break;
case "Out-Clan":
disableDotsInGroup("ou1");
disableDotsInGroup("ou2");
disableDotsInGroup("ou3");
break;
case "Backgrounds":
disableDotsInGroup("bk1");
disableDotsInGroup("bk2");
disableDotsInGroup("bk3");
disableDotsInGroup("bk4");
disableDotsInGroup("bk5");
disableDotsInGroup("bk6");
break;
case "Virtues":
default:
console.log("Error encountered when calling disableDotsInMetaGroup: bad metaGroup");
return false;
break;
}
}
function enableDotsInMetaGroup(metaGroup, enable1, enable2, enable3, enable4, enable5) /* physical, mental, etc */ {
switch (metaGroup) {
case "Physical":
enableDotsInGroup("stren", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("dexte", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("stami", enable1, enable2, enable3, enable4, enable5);
break;
case "Social":
enableDotsInGroup("chari", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("manip", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("appea", enable1, enable2, enable3, enable4, enable5);
break;
case "Mental":
enableDotsInGroup("perce", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("intel", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("wits", enable1, enable2, enable3, enable4, enable5);
break;
case "Talents":
enableDotsInGroup("alert", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("athle", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("brawl", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("dodge", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("empat", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("expre", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("intim", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("leade", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("stree", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("subte", enable1, enable2, enable3, enable4, enable5);
break;
case "Skills":
enableDotsInGroup("anima", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("craft", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("drive", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("etiqu", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("firea", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("melee", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("perfo", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("secur", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("steal", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("survi", enable1, enable2, enable3, enable4, enable5);
break;
case "Knowledges":
enableDotsInGroup("acade", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("compu", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("finan", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("inves", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("law", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("lingu", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("medic", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("occul", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("polit", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("scien", enable1, enable2, enable3, enable4, enable5);
break;
case "In-Clan":
enableDotsInGroup("in1", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("in2", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("in3", enable1, enable2, enable3, enable4, enable5);
break;
case "Out-Clan":
enableDotsInGroup("ou1", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("ou2", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("ou3", enable1, enable2, enable3, enable4, enable5);
break;
case "Backgrounds":
enableDotsInGroup("bk1", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("bk2", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("bk3", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("bk4", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("bk5", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("bk6", enable1, enable2, enable3, enable4, enable5);
break;
case "Virtues":
enableDotsInGroup("consc", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("self ", enable1, enable2, enable3, enable4, enable5);
enableDotsInGroup("coura", enable1, enable2, enable3, enable4, enable5);
break;
default:
console.log("Error encountered when calling enableDotsInMetaGroup: bad metaGroup");
return false;
break;
}
}
function checkGeneration() {
var dropdowns = document.getElementsByTagName('select');
var pool;
var background;
for (var i=1;i<dropdowns.length;i++) /* Skipping the first one, because it's not in the group */ {
if (dropdowns[i].value == "Generation") {
background = "bk" + i;
console.log(background);
if (document.getElementById(background+'5').checked) {
document.getElementById('generation').value = '8';
pool = 15;
} else if (document.getElementById(background+'4').checked) {
document.getElementById('generation').value = '9';
pool = 14;
} else if (document.getElementById(background+'3').checked) {
document.getElementById('generation').value = '10';
pool = 13;
} else if (document.getElementById(background+'2').checked) {
document.getElementById('generation').value = '11';
pool = 12;
} else if (document.getElementById(background+'1').checked) {
document.getElementById('generation').value = '12';
pool = 11;
} else {
document.getElementById('generation').value = '13';
pool = 10;
}
}
}
var blood = document.getElementsByClassName('blood');
for (i=blood.length-1;i>=pool;i--) {
blood[i].checked = true;
blood[i].disabled = true;
}
}
function enableOnlyUnchecked() {
for (var i=0;i<document.getElementsByClassName('dot').length;i++) {
document.getElementsByClassName('dot')[i].disabled = document.getElementsByClassName('dot')[i].checked /* disabled if checked */
}
}
function decrementCounter(step) {
var myValue = document.getElementById("dotCounter").innerHTML.valueOf();
for (var i=0;i<step;i++) {
myValue--;
}
document.getElementById("dotCounter").innerHTML = myValue;
updateScreen();
}
function incrementCounter(step) {
var myValue = document.getElementById("dotCounter").innerHTML.valueOf();
for (var i=0;i<step;i++) {
myValue++;
}
document.getElementById("dotCounter").innerHTML = myValue;
updateScreen();
}
function updateScreen() /* makes sure all of the things that should be updated, are */{
if (document.getElementById("dotCounter").innerHTML.valueOf() == 0) {
document.getElementById("dotCounter").style.display = "none";
nextStep();
};
if (flown) {
flyout();
} else {
flyin();
};
}
function nextStep() /* Advances to the next step */{
abort = true;
switch (window.stepName) {
case "Step00":
Step01();
break;
case "Step01":
Step02();
break;
case "Step02":
Step03();
break;
case "Step03":
Step04();
break;
case "Step04":
Step05();
break;
case "Step05":
Step06();
break;
case "Step06":
Step07();
break;
case "Step07":
Step08();
break;
case "Step08":
Step09();
break;
case "Step09":
Step10();
break;
case "Step10":
Step11();
break;
case "Step11":
Step12();
break;
};
flown = true;
updateScreen();
}
/* Event assignment stuff */
function attributeSelectionBuilder() /* build the steps menu feature that allows the selection of attribute groups */ {
phys = document.getElementsByClassName("phy");
for (i=0,max = document.getElementsByClassName("phy").length;i<max;i++) {
phys[i].onclick = function() {
leftBlocker.remove();
dotCounter.style.left = 170;
dotCounter.style.top = 260;
dotCounter.style.display = "block";
for (i=0,max = document.getElementsByClassName("phy").length;i<max;i++) {
phys[i].style.display = "none";
};
this.parentNode.style.display = 'none';
enableDotsInMetaGroup("Physical",false,true,true,true,false);
};
};
soci = document.getElementsByClassName("soc");
for (i=0,max = document.getElementsByClassName("soc").length;i<max;i++) {
soci[i].onclick = function() {
centerBlocker.remove();
dotCounter.style.left = 475;
dotCounter.style.top = 260;
dotCounter.style.display = "block";
for (i=0,max = document.getElementsByClassName("soc").length;i<max;i++) {
soci[i].style.display = "none";
};
this.parentNode.style.display = 'none';
enableDotsInMetaGroup("Social",false,true,true,true,false);
if (window.clan == "Nosferatu") { disableDotsInGroup("app"); };
};
};
ment = document.getElementsByClassName("men");
for (i=0,max = document.getElementsByClassName("men").length;i<max;i++) {
ment[i].onclick = function() {
rightBlocker.remove();
dotCounter.style.left = 785;
dotCounter.style.top = 260;
dotCounter.style.display = "block";
for (i=0,max = document.getElementsByClassName("men").length;i<max;i++) {
ment[i].style.display = "none";
};
this.parentNode.style.display = 'none';
enableDotsInMetaGroup("Mental",false,true,true,true,false);
};
};
}
function abilitySelectionBuilder() /* build the steps menu feature that allows the selection of ability groups */ {
tale = document.getElementsByClassName("tal");
for (i=0,max = document.getElementsByClassName("tal").length;i<max;i++) {
tale[i].onclick = function() {
leftBlocker.remove();
dotCounter.style.left = 150;
dotCounter.style.top = 390;
dotCounter.style.display = "block";
for (i=0,max = document.getElementsByClassName("tal").length;i<max;i++) {
tale[i].style.display = "none";
};
this.parentNode.style.display = 'none';
enableDotsInMetaGroup("Talents",true,true,true,false,false);
};
};
skil = document.getElementsByClassName("ski");
for (i=0,max = document.getElementsByClassName("ski").length;i<max;i++) {
skil[i].onclick = function() {
centerBlocker.remove();
dotCounter.style.left = 460;
dotCounter.style.top = 390;
dotCounter.style.display = "block";
for (i=0,max = document.getElementsByClassName("ski").length;i<max;i++) {
skil[i].style.display = "none";
};
this.parentNode.style.display = 'none';
enableDotsInMetaGroup("Skills",true,true,true,false,false);
};
};
know = document.getElementsByClassName("kno");
for (i=0,max = document.getElementsByClassName("kno").length;i<max;i++) {
know[i].onclick = function() {
rightBlocker.remove();
dotCounter.style.left = 775;
dotCounter.style.top = 390;
dotCounter.style.display = "block";
for (i=0,max = document.getElementsByClassName("kno").length;i<max;i++) {
know[i].style.display = "none";
};
this.parentNode.style.display = 'none';
enableDotsInMetaGroup("Knowledges",true,true,true,false,false);
};
};
}
function backgroundBuilder() {
document.getElementById('background1').onchange = function () {
document.getElementById("bk1").innerHTML = document.getElementById('background1').value + document.getElementById("bk1").innerHTML.substr(3, document.getElementById("bk1").innerHTML.length -3);
initialDotSetup();
}
document.getElementById('background2').onchange = function () {
document.getElementById("bk2").innerHTML = document.getElementById('background2').value + document.getElementById("bk2").innerHTML.substr(3, document.getElementById("bk2").innerHTML.length -3);
initialDotSetup();
}
document.getElementById('background3').onchange = function () {
document.getElementById("bk3").innerHTML = document.getElementById('background3').value + document.getElementById("bk3").innerHTML.substr(3, document.getElementById("bk3").innerHTML.length -3);
initialDotSetup();
}
document.getElementById('background4').onchange = function () {
document.getElementById("bk4").innerHTML = document.getElementById('background4').value + document.getElementById("bk4").innerHTML.substr(3, document.getElementById("bk4").innerHTML.length -3);
initialDotSetup();
}
document.getElementById('background5').onchange = function () {
document.getElementById("bk5").innerHTML = document.getElementById('background5').value + document.getElementById("bk5").innerHTML.substr(3, document.getElementById("bk5").innerHTML.length -3);
initialDotSetup();
}
document.getElementById('background6').onchange = function () {
document.getElementById("bk6").innerHTML = document.getElementById('background6').value + document.getElementById("bk6").innerHTML.substr(3, document.getElementById("bk6").innerHTML.length -3);
initialDotSetup();
}
}
function initialDotSetup() {
allDots = document.getElementsByClassName("dot");
for (i=0,max = document.getElementsByClassName("dot").length;i<max;i++) {
removeAllMyEventListeners(allDots[i]);
allDots[i].onclick = function() {
if (this.checked) {
decrementCounter(1);
} else {
incrementCounter(1);
};
};
};
}
function freebieDotSetup() {
var allDots = document.getElementsByClassName("dot");
var attributeDots = new Array(45);
var abilityDots = new Array(150);
var disciplineDots = new Array(30);
var backgroundDots = new Array(30);
var virtueDots = new Array(15);
var humanityDots = new Array(10);
var willpowerDots = new Array(10);
var i;
var startPos=0;
for (i=0,max = allDots.length;i<max;i++) {
if (allDots[i].checked) {
allDots[i].disabled = true;
} else {
allDots[i].disabled = false;
}
}
for (i=0;i<attributeDots.length;i++) {
attributeDots[i] = allDots[i+startPos];
}
for (i=0;i<attributeDots.length;i++) {
attributeDots[i].onclick = function() {
if (this.checked) {
decrementCounter(5);
} else {
incrementCounter(5);
};
}
}
startPos = startPos + attributeDots.length;
for (i=0;i<abilityDots.length;i++) {
abilityDots[i] = allDots[i+startPos];
}
for (i=0;i<abilityDots.length;i++) {
abilityDots[i].onclick = function() {
if (this.checked) {
decrementCounter(2);
} else {
incrementCounter(2);
};
}
}
startPos = startPos + abilityDots.length;
for (i=0;i<disciplineDots.length;i++) {
disciplineDots[i] = allDots[i+startPos];
}
for (i=0;i<disciplineDots.length;i++) {
disciplineDots[i].onclick = function() {
if (this.checked) {
decrementCounter(7);
} else {
incrementCounter(7);
};
}
}
startPos = startPos + disciplineDots.length;
for (i=0;i<backgroundDots.length;i++) {
backgroundDots[i] = allDots[i+startPos];
}
for (i=0;i<backgroundDots.length;i++) {
backgroundDots[i].onclick = function() {
if (this.checked) {
decrementCounter(1);
} else {
incrementCounter(1);
};
}
}
startPos = startPos + backgroundDots.length;
for (i=0;i<virtueDots.length;i++) {
virtueDots[i] = allDots[i+startPos];
}
for (i=0;i<virtueDots.length;i++) {
virtueDots[i].onclick = function() {
if (this.checked) {
decrementCounter(2);
} else {
incrementCounter(2);
};
}
}
startPos = startPos + virtueDots.length;
for (i=0;i<humanityDots.length;i++) {
humanityDots[i] = allDots[i+startPos];
}
for (i=0;i<humanityDots.length;i++) {
humanityDots[i].onclick = function() {
if (this.checked) {
decrementCounter(2);
} else {
incrementCounter(2);
};
}
}
startPos = startPos + humanityDots.length;
for (i=0;i<willpowerDots.length;i++) {
willpowerDots[i] = allDots[i+startPos];
}
for (i=0;i<willpowerDots.length;i++) {
willpowerDots[i].onclick = function() {
if (this.checked) {
decrementCounter(1);
} else {
incrementCounter(1);
};
}
}
}
function xpDotSetup() {
var allDots = document.getElementsByClassName("dot");
var attributeDots = new Array(45);
var abilityDots = new Array(150);
var inDisciplineDots = new Array(15);
var outDisciplineDots = new Array(15);
var backgroundDots = new Array(30);
var virtueDots = new Array(15);
var humanityDots = new Array(10);
var willpowerDots = new Array(10);
var i;
var startPos=0;
for (i=0,max = allDots.length;i<max;i++) {
if (allDots[i].checked) {
allDots[i].disabled = true;
} else {
allDots[i].disabled = false;
}
}
for (i=0;i<attributeDots.length;i++) /* set variable */ {
attributeDots[i] = allDots[i+startPos];
}
for (i=0;i<attributeDots.length;i++) /* add function */ {
attributeDots[i].onclick = function() {
if (this.checked) {
decrementCounter(4 * (i % 5));
} else {
incrementCounter(4 * (i % 5));
};
}
}
startPos = startPos + attributeDots.length;
for (i=0;i<abilityDots.length;i++) /* set variable */ {
abilityDots[i] = allDots[i+startPos];
}
for (i=0;i<abilityDots.length;i++) /* add function */ {
abilityDots[i].onclick = function() {
if ((i % 5) === 0) {
if (this.checked) {
decrementCounter(3);
} else {
incrementCounter(3);
};
} else {
if (this.checked) {
decrementCounter(2 * (i % 5));
} else {
incrementCounter(2 * (i % 5));
};
}
}
}
startPos = startPos + abilityDots.length;
for (i=0;i<inDisciplineDots.length;i++) /* set variable */ {
inDisciplineDots[i] = allDots[i+startPos];
}
for (i=0;i<inDisciplineDots.length;i++) /* add function */ {
inDisciplineDots[i].onclick = function() {
if ((i % 5) === 0) {
if (this.checked) {
decrementCounter(10);
} else {
incrementCounter(10);
};
} else {
if (this.checked) {
decrementCounter(5 * (i % 5));
} else {
incrementCounter(5 * (i % 5));
};
}
}
}
startPos = startPos + inDisciplineDots.length;
for (i=0;i<outDisciplineDots.length;i++) /* set variable */ {
outDisciplineDots[i] = allDots[i+startPos];
}
for (i=0;i<outDisciplineDots.length;i++) /* add function */ {
outDisciplineDots[i].onclick = function() {
if ((i % 5) === 0) {
if (this.checked) {
decrementCounter(10);
} else {
incrementCounter(10);
};
} else {
if (this.checked) {
decrementCounter(7 * (i % 5));
} else {
incrementCounter(7 * (i % 5));
};
}
}
}
startPos = startPos + outDisciplineDots.length;
for (i=0;i<backgroundDots.length;i++) /* set variable */ {
backgroundDots[i] = allDots[i+startPos];
}
for (i=0;i<backgroundDots.length;i++) /* set variable */ {
backgroundDots[i].disabled = true;
}
for (i=0;i<backgroundDots.length;i++) /* add function */ {
backgroundDots[i].onclick = function() {
/* no effect; cannot add dots to backgrounds with xp */
}
}
startPos = startPos + backgroundDots.length;
for (i=0;i<virtueDots.length;i++) /* set variable */ {
virtueDots[i] = allDots[i+startPos];
}
for (i=0;i<virtueDots.length;i++) /* add function */ {
virtueDots[i].onclick = function() {
if (this.checked) {
decrementCounter(2 * (i % 5));
} else {
incrementCounter(2 * (i % 5));
};
}
}
startPos = startPos + virtueDots.length;
for (i=0;i<humanityDots.length;i++) /* set variable */ {
humanityDots[i] = allDots[i+startPos];
}
for (i=0;i<humanityDots.length;i++) /* add function */ {
humanityDots[i].onclick = function() {
if (this.checked) {
decrementCounter(2 * (i % 5));
} else {
incrementCounter(2 * (i % 5));
};
}
}
startPos = startPos + humanityDots.length;
for (i=0;i<willpowerDots.length;i++) /* set variable */ {
willpowerDots[i] = allDots[i+startPos];
}
for (i=0;i<willpowerDots.length;i++) /* add function */ {
willpowerDots[i].onclick = function() {
if (this.checked) {
decrementCounter(i % 5);
} else {
incrementCounter(i % 5);
};
}
}
}
</script>
<script type="text/javascript">
// This is typically an external file that I may not use all of on this page.
function flyoutOnRight() {
window.flown = false;
window.stepName = "Step01";
window.phases = document.getElementById("phases");
window.phasesName = document.getElementById("phasesName");
window.phasesBody = document.getElementById("phasesBody");
phases.style.width = 325;
phases.style.left = (window.innerWidth - 45);
phases.style.height = (window.innerHeight * .75);
}
function flyout() {
window.phases.style.left = window.innerWidth - (window.phases.style.width.replace("px","").valueOf());
window.flown = true;
phasesName = document.getElementById("phasesName");
phasesBody = document.getElementById("phasesBody");
phasesName.style.display = "none";
phasesBody.style.display = "block";
}
function flyin() {
if (abort) {
abort = false;
return;
}
window.phases.style.left = window.innerWidth - 45;
window.flown = false;
phasesName.style.display = "inline-block";
phasesBody.style.display = "none";
}
function Step00() /* Things to do onLoad */ {
disableDotsInGroup('All');
disableDotsInGroup('bloodPool');
flyoutOnRight();
flyout();
}
function Step01() /* Clan Selection */ {
stepName = 'Step01';
clan = document.getElementById('clanSelect');
clan = clan.value;
if (clan == "Nosferatu") {
document.getElementById('appea1').checked = false;
} else {
document.getElementById('appea1').checked = true;
}
var disciplinesByClan = new Array();
disciplinesByClan['Assimite'] = ['Celerity', 'Obfuscate', 'Quietus'];
disciplinesByClan['Brujah'] = ['Celerity', 'Potence', 'Presence'];
disciplinesByClan['Gangrel'] = ['Animalism', 'Fortitude', 'Protean'];
disciplinesByClan['Giovanni'] = ['Dominate', 'Necromancy', 'Potence'];
disciplinesByClan['Lasombra'] = ['Dominate', 'Obtenebration', 'Potence'];
disciplinesByClan['Malkavian'] = ['Auspex', 'Dementation', 'Obfuscate'];
disciplinesByClan['Nosferatu'] = ['Animalism', 'Obfuscate', 'Potence'];
disciplinesByClan['Ravnos'] = ['Animalism', 'Chimerstry', 'Fortitude'];
disciplinesByClan['Toreador'] = ['Auspex', 'Celerity', 'Presence'];
disciplinesByClan['Tremere'] = ['Auspex', 'Dominate', 'Thaumaturgy'];
disciplinesByClan['Ventrue'] = ['Dominate', 'Fortitude', 'Presence'];
disciplinesByClan['Tzimisce'] = ['Animalism', 'Auspex', 'Vicissitude'];
disciplinesByClan['Setite'] = ['Obfuscate', 'Presence', 'Serpentis'];
var allDisciplines = [' ', 'Animalism', 'Auspex', 'Celerity', 'Chimerstry', 'Dementation', 'Dominate', 'Fortitude', 'Obfuscate', 'Obtenebration', 'Potence', 'Presence', 'Protean', 'Quietus', 'Serpentis', 'Vicissitude']
var thisClan = disciplinesByClan[clan];
var indisciplines = new Array();
var outdisciplines1 = new Array();
var outdisciplines2 = new Array();
var outdisciplines3 = new Array();
changeFirstCharacters('in1', thisClan[0], 3);
changeFirstCharacters('in2', thisClan[1], 3);
changeFirstCharacters('in3', thisClan[2], 3);
document.getElementById('clanName').innerHTML = "<h1>" + clan + "</h1>";
window.initialDotSetup()
window.nextStep();
}
function Step02() /* Attributes (1 of 3) */ {
stepName = 'Step02';
var blocker = document.createElement("div");
blocker.style.position = "absolute";
blocker.style.display = "inline";
blocker.style.top = 220;
blocker.style.left = 15;
blocker.style.width = 300;
blocker.style.height = 115;
blocker.style.backgroundColor = "#000";
blocker.style.opacity = .5;
window.leftBlocker = document.body.appendChild(blocker);
window.centerBlock = leftBlocker.cloneNode(false);
window.centerBlocker = document.body.appendChild(centerBlock);
window.rightBlock = leftBlocker.cloneNode(false);
window.rightBlocker = document.body.appendChild(rightBlock);
centerBlocker.style.left = 325;
rightBlocker.style.left = 635;
document.getElementById("dotCounter").innerHTML = "7";
document.getElementById("Step01").className = "previous";
document.getElementById("Step02").className = "current";
disableDotsInMetaGroup("Physical");
disableDotsInMetaGroup("Social");
disableDotsInMetaGroup("Mental");
}
function Step03() /* Attributes (2 of 3) */ {
stepName = 'Step03';
document.getElementById("dotCounter").innerHTML = "5";
document.getElementById("Step02").className = "previous";
document.getElementById("Step03").className = "current";
disableDotsInMetaGroup("Physical");
disableDotsInMetaGroup("Social");
disableDotsInMetaGroup("Mental");
}
function Step04() /* Attributes (3 of 3) */ {
stepName = 'Step04';
document.getElementById("dotCounter").innerHTML = "3";
document.getElementById("Step03").className = "previous";
document.getElementById("Step04").className = "current";
disableDotsInMetaGroup("Physical");
disableDotsInMetaGroup("Social");
disableDotsInMetaGroup("Mental");
}
function Step05() /* Abilities (1 of 3) */ {
stepName = 'Step05';
var blocker = document.createElement("div");
blocker.style.position = "absolute";
blocker.style.display = "inline";
blocker.style.top = 365;
blocker.style.left = 15;
blocker.style.width = 300;
blocker.style.height = 285;
blocker.style.backgroundColor = "#000";
blocker.style.opacity = .5;
window.leftBlocker = document.body.appendChild(blocker);
window.centerBlock = leftBlocker.cloneNode(false);
window.centerBlocker = document.body.appendChild(centerBlock);
window.rightBlock = leftBlocker.cloneNode(false);
window.rightBlocker = document.body.appendChild(rightBlock);
centerBlocker.style.left = 325;
rightBlocker.style.left = 635;
document.getElementById("dotCounter").innerHTML = "13";
document.getElementById("Step04").className = "previous";
document.getElementById("Step05").className = "current";
disableDotsInGroup('All');
}
function Step06() /* Abilities (2 of 3) */ {
stepName = 'Step06';
document.getElementById("dotCounter").innerHTML = "9";
document.getElementById("Step05").className = "previous";
document.getElementById("Step06").className = "current";
disableDotsInMetaGroup("Talents");
disableDotsInMetaGroup("Skills");
disableDotsInMetaGroup("Knowledges");
}
function Step07() /* Abilities (3 of 3) */ {
stepName = 'Step07';
document.getElementById("dotCounter").innerHTML = "5";
document.getElementById("Step06").className = "previous";
document.getElementById("Step07").className = "current";
disableDotsInMetaGroup("Talents");
disableDotsInMetaGroup("Skills");
disableDotsInMetaGroup("Knowledges");
}
function Step08() /* Disciplines */ {
stepName = 'Step08';
document.getElementById("dotCounter").innerHTML = "3";
dotCounter.style.left = 150;
dotCounter.style.top = 690;
dotCounter.style.display = "block";
document.getElementById("Step07").className = "previous";
document.getElementById("Step08").className = "current";
disableDotsInGroup("All");
enableDotsInMetaGroup("In-Clan",true,true,true,false,false);
}
function Step09() /* Backgrounds */ {
stepName = 'Step09';
document.getElementById("dotCounter").innerHTML = "5";
dotCounter.style.left = 460;
dotCounter.style.top = 710;
dotCounter.style.display = "block";
document.getElementById("Step08").className = "previous";
document.getElementById("Step09").className = "current";
backgroundBuilder();
disableDotsInGroup("All");
enableDotsInMetaGroup("Backgrounds",true,true,true,true,true);
}
function Step10() /* Virtues */ {
stepName = 'Step10';
checkGeneration()
document.getElementById("dotCounter").innerHTML = "7";
dotCounter.style.left = 775;
dotCounter.style.top = 710;
dotCounter.style.display = "block";
document.getElementById("Step09").className = "previous";
document.getElementById("Step10").className = "current";
disableDotsInGroup("All");
enableDotsInMetaGroup("Virtues",false,true,true,true,true);
}
function Step11() /* Freebie Points */ {
var humanity = 0;
var courage = 0;
stepName = 'Step11';
document.getElementById("dotCounter").innerHTML = document.getElementById("freebiePoints").value;
dotCounter.style.left = 945;
dotCounter.style.top = 125;
dotCounter.style.display = "block";
document.getElementById("Step10").className = "previous";
document.getElementById("Step11").className = "current";
for (var i=0;i<5;i++) {
if (document.getElementById('consc' + (i+1)).checked) { humanity++; };
if (document.getElementById('self ' + (i+1)).checked) { humanity++; };
}
for (i=0;i<humanity;i++) {
document.getElementById('human' + (i+1)).checked = true;
document.getElementById('human' + (i+1)).disabled = true;
}
for (var i=0;i<5;i++) {
if (document.getElementById('coura' + (i+1)).checked) { courage++; };
}
for (i=0;i<courage;i++) {
document.getElementById('willp' + (i+1)).checked = true;
document.getElementById('willp' + (i+1)).disabled = true;
}
enableOnlyUnchecked();
freebieDotSetup();
}
function Step12() /* Experience Points */ {
stepName = 'Step12';
document.getElementById("dotCounter").innerHTML = document.getElementById("xp").value;
dotCounter.style.left = 945;
dotCounter.style.top = 125;
dotCounter.style.display = "block";
document.getElementById("Step11").className = "previous";
document.getElementById("Step12").className = "current";
enableOnlyUnchecked();
xpDotSetup();
}
function updateFreebies() {
document.getElementById('dotCounter').innerHTML = document.getElementById('freebiePoints').value;
}
function updateXP() {
document.getElementById('dotCounter').innerHTML = document.getElementById('xp').value;
}
document.addEventListener('DOMContentLoaded',function() {
var i;
window.onresize = function() {
flyoutOnRight();
if (flown) {
flyin();
} else {
flyout();
};
};
addEventToID("charSheet","Click","flyin()");
addEventToID("phases","Click","flyout()");
addEventToID("clanSelect","Change","Step01()");
addEventToID("freebieUpdate","Click","updateFreebies()");
addEventToID("xpUpdate","Click","updateXP()");
if (document.getElementById('Step02')) {
attributeSelectionBuilder();
};
if (document.getElementById('Step05')) {
abilitySelectionBuilder();
};
initialDotSetup();
Step00();
});
</script>
</head>
<body>
<div id="dotCounter">0</div>
<div id='phases'>
<div id="phasesName">Phases / Instructions</div>
<div id="phasesBody">
<p>The highlighted phase is the one you are currently on. Follow the instructions within that group.</p>
<div id="Step01" class="current"><!-- Clan Select /-->
Step 1
<div>
Fill in the text boxes, then select your Clan<br />
<select name="clan" id="clanSelect">
<option>Select your Clan</option>
<option>- Camarilla -</option>
<option>Brujah</option>
<option>Gangrel</option>
<option>Malkavian</option>
<option>Nosferatu</option>
<option>Toreador</option>
<option>Tremere</option>
<option>Ventrue</option>
<option>- Sabbat -</option>
<option>Lasombra</option>
<option>Tzimisce</option>
<option>- Independant -</option>
<option>Assimite</option>
<option>Giovanni</option>
<option>Ravnos</option>
<option>Setite</option>
<option>- Extinct -</option>
<option>Salubri</option>
</select>
</div>
</div>
<div id="Step02" class="next"><!-- PSM 1 /-->
Step 2
<div>
Choose an attribute group to be PRIMARY (gets 7 dots added):
<div>
<div class="phy"><ul><li>Physical</li></ul></div>
<div class="soc"><ul><li>Social</li></ul></div>
<div class="men"><ul><li>Mental</li></ul></div>
</div><br />
... then fill in that many dots.
</div>
</div>
<div id="Step03" class="next"><!-- PSM 2 /-->
Step 3
<div>
Choose an attribute group to be SECONDARY (gets 5 dots added):
<div>
<div class="phy"><ul><li>Physical</li></ul></div>
<div class="soc"><ul><li>Social</li></ul></div>
<div class="men"><ul><li>Mental</li></ul></div>
</div><br />
... then fill in that many dots.
</div>
</div>
<div id="Step04" class="next"><!-- PSM 3 /-->
Step 4
<div>
Choose an attribute group to be TERTIARY (gets 3 dots added):
<div>
<div class="phy"><ul><li>Physical</li></ul></div>
<div class="soc"><ul><li>Social</li></ul></div>
<div class="men"><ul><li>Mental</li></ul></div>
</div><br />
... then fill in that many dots.
</div>
</div>
<div id="Step05" class="next"><!-- TSK 1 /-->
Step 5
<div>
Choose an ability group to be PRIMARY (gets 7 dots added):
<div>
<div class="tal"><ul><li>Talents</li></ul></div>
<div class="ski"><ul><li>Skills</li></ul></div>
<div class="kno"><ul><li>Knowledges</li></ul></div>
</div><br />
... then fill in that many dots.
</div>
</div>
<div id="Step06" class="next"><!-- TSK 2 /-->
Step 6
<div>
Choose an ability group to be PRIMARY (gets 7 dots added):
<div>
<div class="tal"><ul><li>Talents</li></ul></div>
<div class="ski"><ul><li>Skills</li></ul></div>
<div class="kno"><ul><li>Knowledges</li></ul></div>
</div><br />
... then fill in that many dots.
</div>
</div>
<div id="Step07" class="next"><!-- TSK 3 /-->
Step 7
<div>
Choose an ability group to be PRIMARY (gets 7 dots added):
<div>
<div class="tal"><ul><li>Talents</li></ul></div>
<div class="ski"><ul><li>Skills</li></ul></div>
<div class="kno"><ul><li>Knowledges</li></ul></div>
</div><br />
... then fill in that many dots.
</div>
</div>
<div id="Step08" class="next"><!-- In-Clan Disciplines /-->
Step 8
<div>
Place dots in in-clan disciplines (total of 3 dots at this stage).
</div>
</div>
<div id="Step09" class="next"><!-- Backgrounds /-->
Step 9
<div>
Place dots in Backgrounds (total of 5 dots at this stage).
<select name="background1" id="background1">
<option> - Please Select Background - </option>
<option>Allies</option>
<option>Alternate Identity</option>
<option>Black Hand Membership(*)</option>
<option>Contacts</option>
<option>Domain</option>
<option>Fame</option>
<option>Generation</option>
<option>Herd</option>
<option>Influence</option>
<option>Mentor</option>
<option>Resources</option>
<option>Retainers</option>
<option>Rituals(*)</option>
</select>
<select name="background2" id="background2">
<option> - Please Select Background - </option>
<option>Allies</option>
<option>Alternate Identity</option>
<option>Black Hand Membership(*)</option>
<option>Contacts</option>
<option>Domain</option>
<option>Fame</option>
<option>Generation</option>
<option>Herd</option>
<option>Influence</option>
<option>Mentor</option>
<option>Resources</option>
<option>Retainers</option>
<option>Rituals(*)</option>
</select>
<select name="background3" id="background3">
<option> - Please Select Background - </option>
<option>Allies</option>
<option>Alternate Identity</option>
<option>Black Hand Membership(*)</option>
<option>Contacts</option>
<option>Domain</option>
<option>Fame</option>
<option>Generation</option>
<option>Herd</option>
<option>Influence</option>
<option>Mentor</option>
<option>Resources</option>
<option>Retainers</option>
<option>Rituals(*)</option>
</select>
<select name="background4" id="background4">
<option> - Please Select Background - </option>
<option>Allies</option>
<option>Alternate Identity</option>
<option>Black Hand Membership(*)</option>
<option>Contacts</option>
<option>Domain</option>
<option>Fame</option>
<option>Generation</option>
<option>Herd</option>
<option>Influence</option>
<option>Mentor</option>
<option>Resources</option>
<option>Retainers</option>
<option>Rituals(*)</option>
</select>
<select name="background5" id="background5">
<option> - Please Select Background - </option>
<option>Allies</option>
<option>Alternate Identity</option>
<option>Black Hand Membership(*)</option>
<option>Contacts</option>
<option>Domain</option>
<option>Fame</option>
<option>Generation</option>
<option>Herd</option>
<option>Influence</option>
<option>Mentor</option>
<option>Resources</option>
<option>Retainers</option>
<option>Rituals(*)</option>
</select>
<select name="background6" id="background6">
<option> - Please Select Background - </option>
<option>Allies</option>
<option>Alternate Identity</option>
<option>Black Hand Membership(*)</option>
<option>Contacts</option>
<option>Domain</option>
<option>Fame</option>
<option>Generation</option>
<option>Herd</option>
<option>Influence</option>
<option>Mentor</option>
<option>Resources</option>
<option>Retainers</option>
<option>Rituals(*)</option>
</select>
</div>
</div>
<div id="Step10" class="next"><!-- Virtues /-->
Step 10
<div>
Place dots in Virtues (total of 7 dots at this stage).
</div>
</div>
<div id="Step11" class="next"><!-- Freebies /-->
Step 11
<div>
Spend Freebie Points (15 available).<br />
To override the freebies you have, change this value:
<input type="text" id="freebiePoints" value="15"><input type="submit" id="freebieUpdate" value="update">
</div>
</div>
<div id="Step12" class="next"><!-- XP /-->
Step 12
<div>
Spend XP (0 available).<br />
To override the XP you have, change this value:
<input type="text" id="xp" value="15"><input type="submit" id="xpUpdate" value="update">
</div>
</div>
</div>
</div>
Please input your character below. The flyout on the side will tell you what step you're on.
<form action="store.php" method="get">
<input name="test" value="Test" type="hidden">
<div id="charSheet">
<div id="clanName">
<H1>Vampire: the Masquerade</H1>
</div>
<div id="plainText" class="section">
<div id="text1" class="lefty">
<label>Character's Name
<input type="text" id="characterName">
</label>
<br />
<label>Player
<input type="text" id="player">
</label>
<br />
<label>Chronicle
<input type="text" id="chronicle">
</label>
<br />
</div>
<div id="text2" class="centery">
<label>Nature
<input type="text" id="nature">
</label>
<br />
<label>Demeanor
<input type="text" id="demeanor">
</label>
<br />
<label>Concept
<input type="text" id="concept">
</label>
<br />
</div>
<div id="text3" class="righty">
<label>Generation
<input type="text" id="generation" value="13">
</label>
<br />
<label>Sire
<input type="text" id="sire">
</label>
<br />
<label>Title
<input type="text" id="title">
</label>
</div>
</div>
<div id="attributes" class="section">
Attributes<br />
<div id="physical" class="lefty">Physical
<div id="stren" class="attr">Strength
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="stren1" checked="true" disabled="disabled">
<label for="stren1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="stren2" disabled="disabled">
<label for="stren2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="stren3" disabled="disabled">
<label for="stren3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="stren4" disabled="disabled">
<label for="stren4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="stren5" disabled="disabled">
<label for="stren5"></label>
</div>
</div>
</div>
<div id="dexte" class="attr">Dexterity
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="dexte1" checked="true" disabled="disabled">
<label for="dexte1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="dexte2" disabled="disabled">
<label for="dexte2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="dexte3" disabled="disabled">
<label for="dexte3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="dexte4" disabled="disabled">
<label for="dexte4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="dexte5" disabled="disabled">
<label for="dexte5"></label>
</div>
</div>
</div>
<div id="stami" class="attr">Stamina
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="stami1" checked="true" disabled="disabled">
<label for="stami1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="stami2" disabled="disabled">
<label for="stami2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="stami3" disabled="disabled">
<label for="stami3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="stami4" disabled="disabled">
<label for="stami4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="stami5" disabled="disabled">
<label for="stami5"></label>
</div>
</div>
</div>
</div>
<div id="social" class="centery">Social
<div id="chari" class="attr">Charisma
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="chari1" checked="true" disabled="disabled">
<label for="chari1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="chari2" disabled="disabled">
<label for="chari2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="chari3" disabled="disabled">
<label for="chari3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="chari4" disabled="disabled">
<label for="chari4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="chari5" disabled="disabled">
<label for="chari5"></label>
</div>
</div>
</div>
<div id="manip" class="attr">Manipulation
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="manip1" checked="true" disabled="disabled">
<label for="manip1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="manip2" disabled="disabled">
<label for="manip2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="manip3" disabled="disabled">
<label for="manip3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="manip4" disabled="disabled">
<label for="manip4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="manip5" disabled="disabled">
<label for="manip5"></label>
</div>
</div>
</div>
<div id="appea" class="attr">Appearance
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="appea1" checked="true" disabled="disabled">
<label for="appea1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="appea2" disabled="disabled">
<label for="appea2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="appea3" disabled="disabled">
<label for="appea3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="appea4" disabled="disabled">
<label for="appea4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="appea5" disabled="disabled">
<label for="appea5"></label>
</div>
</div>
</div>
</div>
<div id="mental" class="righty">Mental
<div id="perce" class="attr">Perception
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="perce1" checked="true" disabled="disabled">
<label for="perce1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="perce2" disabled="disabled">
<label for="perce2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="perce3" disabled="disabled">
<label for="perce3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="perce4" disabled="disabled">
<label for="perce4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="perce5" disabled="disabled">
<label for="perce5"></label>
</div>
</div>
</div>
<div id="intel" class="attr">Intelligence
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="intel1" checked="true" disabled="disabled">
<label for="intel1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="intel2" disabled="disabled">
<label for="intel2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="intel3" disabled="disabled">
<label for="intel3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="intel4" disabled="disabled">
<label for="intel4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="intel5" disabled="disabled">
<label for="intel5"></label>
</div>
</div>
</div>
<div id="wits" class="attr">Wits
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="wits1" checked="true" disabled="disabled">
<label for="wits1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="wits2" disabled="disabled">
<label for="wits2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="wits3" disabled="disabled">
<label for="wits3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="wits4" disabled="disabled">
<label for="wits4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="wits5" disabled="disabled">
<label for="wits5"></label>
</div>
</div>
</div>
</div>
</div>
<div id="abilities" class="section">
Abilities<br />
<div id="talents" class="lefty">Talents
<div id="alert" class="attr">Alertness
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="alert1" disabled="disabled">
<label for="alert1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="alert2" disabled="disabled">
<label for="alert2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="alert3" disabled="disabled">
<label for="alert3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="alert4" disabled="disabled">
<label for="alert4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="alert5" disabled="disabled">
<label for="alert5"></label>
</div>
</div>
</div>
<div id="athle" class="attr">Athletics
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="athle1" disabled="disabled">
<label for="athle1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="athle2" disabled="disabled">
<label for="athle2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="athle3" disabled="disabled">
<label for="athle3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="athle4" disabled="disabled">
<label for="athle4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="athle5" disabled="disabled">
<label for="athle5"></label>
</div>
</div>
</div>
<div id="brawl" class="attr">Brawl
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="brawl1" disabled="disabled">
<label for="brawl1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="brawl2" disabled="disabled">
<label for="brawl2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="brawl3" disabled="disabled">
<label for="brawl3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="brawl4" disabled="disabled">
<label for="brawl4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="brawl5" disabled="disabled">
<label for="brawl5"></label>
</div>
</div>
</div>
<div id="dodge" class="attr">Dodge
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="dodge1" disabled="disabled">
<label for="dodge1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="dodge2" disabled="disabled">
<label for="dodge2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="dodge3" disabled="disabled">
<label for="dodge3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="dodge4" disabled="disabled">
<label for="dodge4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="dodge5" disabled="disabled">
<label for="dodge5"></label>
</div>
</div>
</div>
<div id="empat" class="attr">Empathy
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="empat1" disabled="disabled">
<label for="empat1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="empat2" disabled="disabled">
<label for="empat2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="empat3" disabled="disabled">
<label for="empat3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="empat4" disabled="disabled">
<label for="empat4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="empat5" disabled="disabled">
<label for="empat5"></label>
</div>
</div>
</div>
<div id="expre" class="attr">Expression
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="expre1" disabled="disabled">
<label for="expre1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="expre2" disabled="disabled">
<label for="expre2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="expre3" disabled="disabled">
<label for="expre3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="expre4" disabled="disabled">
<label for="expre4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="expre5" disabled="disabled">
<label for="expre5"></label>
</div>
</div>
</div>
<div id="intim" class="attr">Intimidation
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="intim1" disabled="disabled">
<label for="intim1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="intim2" disabled="disabled">
<label for="intim2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="intim3" disabled="disabled">
<label for="intim3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="intim4" disabled="disabled">
<label for="intim4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="intim5" disabled="disabled">
<label for="intim5"></label>
</div>
</div>
</div>
<div id="leade" class="attr">Leadership
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="leade1" disabled="disabled">
<label for="leade1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="leade2" disabled="disabled">
<label for="leade2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="leade3" disabled="disabled">
<label for="leade3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="leade4" disabled="disabled">
<label for="leade4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="leade5" disabled="disabled">
<label for="leade5"></label>
</div>
</div>
</div>
<div id="stree" class="attr">Streetwise
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="stree1" disabled="disabled">
<label for="stree1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="stree2" disabled="disabled">
<label for="stree2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="stree3" disabled="disabled">
<label for="stree3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="stree4" disabled="disabled">
<label for="stree4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="stree5" disabled="disabled">
<label for="stree5"></label>
</div>
</div>
</div>
<div id="subte" class="attr">Subterfuge
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="subte1" disabled="disabled">
<label for="subte1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="subte2" disabled="disabled">
<label for="subte2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="subte3" disabled="disabled">
<label for="subte3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="subte4" disabled="disabled">
<label for="subte4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="subte5" disabled="disabled">
<label for="subte5"></label>
</div>
</div>
</div>
</div>
<div id="skills" class="centery">Skills
<div id="anima" class="attr">Animal Ken
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="anima1" disabled="disabled">
<label for="anima1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="anima2" disabled="disabled">
<label for="anima2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="anima3" disabled="disabled">
<label for="anima3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="anima4" disabled="disabled">
<label for="anima4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="anima5" disabled="disabled">
<label for="anima5"></label>
</div>
</div>
</div>
<div id="craft" class="attr">Crafts
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="craft1" disabled="disabled">
<label for="craft1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="craft2" disabled="disabled">
<label for="craft2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="craft3" disabled="disabled">
<label for="craft3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="craft4" disabled="disabled">
<label for="craft4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="craft5" disabled="disabled">
<label for="craft5"></label>
</div>
</div>
</div>
<div id="drive" class="attr">Drive
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="drive1" disabled="disabled">
<label for="drive1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="drive2" disabled="disabled">
<label for="drive2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="drive3" disabled="disabled">
<label for="drive3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="drive4" disabled="disabled">
<label for="drive4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="drive5" disabled="disabled">
<label for="drive5"></label>
</div>
</div>
</div>
<div id="etiqu" class="attr">Etiquette
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="etiqu1" disabled="disabled">
<label for="etiqu1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="etiqu2" disabled="disabled">
<label for="etiqu2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="etiqu3" disabled="disabled">
<label for="etiqu3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="etiqu4" disabled="disabled">
<label for="etiqu4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="etiqu5" disabled="disabled">
<label for="etiqu5"></label>
</div>
</div>
</div>
<div id="firea" class="attr">Firearms
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="firea1" disabled="disabled">
<label for="firea1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="firea2" disabled="disabled">
<label for="firea2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="firea3" disabled="disabled">
<label for="firea3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="firea4" disabled="disabled">
<label for="firea4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="firea5" disabled="disabled">
<label for="firea5"></label>
</div>
</div>
</div>
<div id="melee" class="attr">Melee
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="melee1" disabled="disabled">
<label for="melee1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="melee2" disabled="disabled">
<label for="melee2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="melee3" disabled="disabled">
<label for="melee3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="melee4" disabled="disabled">
<label for="melee4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="melee5" disabled="disabled">
<label for="melee5"></label>
</div>
</div>
</div>
<div id="perfo" class="attr">Performance
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="perfo1" disabled="disabled">
<label for="perfo1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="perfo2" disabled="disabled">
<label for="perfo2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="perfo3" disabled="disabled">
<label for="perfo3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="perfo4" disabled="disabled">
<label for="perfo4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="perfo5" disabled="disabled">
<label for="perfo5"></label>
</div>
</div>
</div>
<div id="secur" class="attr">Security
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="secur1" disabled="disabled">
<label for="secur1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="secur2" disabled="disabled">
<label for="secur2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="secur3" disabled="disabled">
<label for="secur3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="secur4" disabled="disabled">
<label for="secur4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="secur5" disabled="disabled">
<label for="secur5"></label>
</div>
</div>
</div>
<div id="steal" class="attr">Stealth
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="steal1" disabled="disabled">
<label for="steal1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="steal2" disabled="disabled">
<label for="steal2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="steal3" disabled="disabled">
<label for="steal3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="steal4" disabled="disabled">
<label for="steal4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="steal5" disabled="disabled">
<label for="steal5"></label>
</div>
</div>
</div>
<div id="survi" class="attr">Survival
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="survi1" disabled="disabled">
<label for="survi1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="survi2" disabled="disabled">
<label for="survi2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="survi3" disabled="disabled">
<label for="survi3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="survi4" disabled="disabled">
<label for="survi4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="survi5" disabled="disabled">
<label for="survi5"></label>
</div>
</div>
</div>
</div>
<div id="knowledges" class="righty">Knowledges
<div id="acade" class="attr">Academics
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="acade1" disabled="disabled">
<label for="acade1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="acade2" disabled="disabled">
<label for="acade2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="acade3" disabled="disabled">
<label for="acade3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="acade4" disabled="disabled">
<label for="acade4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="acade5" disabled="disabled">
<label for="acade5"></label>
</div>
</div>
</div>
<div id="compu" class="attr">Computer
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="compu1" disabled="disabled">
<label for="compu1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="compu2" disabled="disabled">
<label for="compu2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="compu3" disabled="disabled">
<label for="compu3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="compu4" disabled="disabled">
<label for="compu4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="compu5" disabled="disabled">
<label for="compu5"></label>
</div>
</div>
</div>
<div id="finan" class="attr">Finance
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="finan1" disabled="disabled">
<label for="finan1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="finan2" disabled="disabled">
<label for="finan2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="finan3" disabled="disabled">
<label for="finan3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="finan4" disabled="disabled">
<label for="finan4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="finan5" disabled="disabled">
<label for="finan5"></label>
</div>
</div>
</div>
<div id="inves" class="attr">Investigation
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="inves1" disabled="disabled">
<label for="inves1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="inves2" disabled="disabled">
<label for="inves2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="inves3" disabled="disabled">
<label for="inves3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="inves4" disabled="disabled">
<label for="inves4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="inves5" disabled="disabled">
<label for="inves5"></label>
</div>
</div>
</div>
<div id="law" class="attr">Law
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="law1" disabled="disabled">
<label for="law1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="law2" disabled="disabled">
<label for="law2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="law3" disabled="disabled">
<label for="law3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="law4" disabled="disabled">
<label for="law4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="law5" disabled="disabled">
<label for="law5"></label>
</div>
</div>
</div>
<div id="lingu" class="attr">Linguistics
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="lingu1" disabled="disabled">
<label for="lingu1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="lingu2" disabled="disabled">
<label for="lingu2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="lingu3" disabled="disabled">
<label for="lingu3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="lingu4" disabled="disabled">
<label for="lingu4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="lingu5" disabled="disabled">
<label for="lingu5"></label>
</div>
</div>
</div>
<div id="medic" class="attr">Medicine
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="medic1" disabled="disabled">
<label for="medic1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="medic2" disabled="disabled">
<label for="medic2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="medic3" disabled="disabled">
<label for="medic3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="medic4" disabled="disabled">
<label for="medic4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="medic5" disabled="disabled">
<label for="medic5"></label>
</div>
</div>
</div>
<div id="occul" class="attr">Occult
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="occul1" disabled="disabled">
<label for="occul1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="occul2" disabled="disabled">
<label for="occul2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="occul3" disabled="disabled">
<label for="occul3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="occul4" disabled="disabled">
<label for="occul4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="occul5" disabled="disabled">
<label for="occul5"></label>
</div>
</div>
</div>
<div id="polit" class="attr">Politics
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="polit1" disabled="disabled">
<label for="polit1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="polit2" disabled="disabled">
<label for="polit2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="polit3" disabled="disabled">
<label for="polit3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="polit4" disabled="disabled">
<label for="polit4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="polit5" disabled="disabled">
<label for="polit5"></label>
</div>
</div>
</div>
<div id="scien" class="attr">Science
<div class="container">
<div class="dots">
<input type="checkbox" class="dot" id="scien1" disabled="disabled">
<label for="scien1"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="scien2" disabled="disabled">
<label for="scien2"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="scien3" disabled="disabled">
<label for="scien3"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="scien4" disabled="disabled">
<label for="scien4"></label>
</div>
<div class="dots">
<input type="checkbox" class="dot" id="scien5" disabled="disabled">
<label for="scien5"></label>
</div>
</div>
</div>
</div>
</div>
<!-- I snipped a lot of repetitive code here. This page won't work well,
but should be enough to demonstrate my issue /-->
</div>
<input type="Submit" value="Save">
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment