"xxx"
Bootstrap 3.3.0 Snippet by koalalrx

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2 class="text-center"><b>Text Generation Evaluation</b></h2> <div class="row"> <div class="col-md-12 text-center"> <div class="box"> <div class="box-content"> <hr /> <h3>There are 10 questions. Please choose the best one of all generated text for each</h3> <h3>considering fluency or readability, that is, the linguistic quality of the text</h3> <a><h3>more details about the criteria</h3></a> </p> <br /> </div> </div> </div> </div> </div> <div class="col-md-12"> <div class="col-md-12"> <form> <h2>2/10 </h2> <div class="form-check"> <label> <input type="radio" name="radio" checked> <span class="label-text">a man is near a motorcycle in an open field . </span> </label> </div> <div class="form-check"> <label> <input type="radio" name="radio"> <span class="label-text">a man standing next to a bicycle parked in front of a building . </span> </label> </div> <div class="form-check"> <label> <input type="radio" name="radio"> <span class="label-text">a man prepares a pulling pink shoes . </span> </label> </div> <div class="form-check"> <label> <input type="radio" name="radio" > <span class="label-text">a man sitiing on a desk covered kitchen with papers </span> </label> </div> </form> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <button id="button1id" name="button1id" class="btn btn-primary">Last One</button> <button id="button2id" name="button2id" class="btn btn-info">Next One</button> </div> </div> </div> </div> </div>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); body{ padding: 50px; } label{ position: relative; cursor: pointer; color: #666; font-size: 30px; } input[type="checkbox"], input[type="radio"]{ position: absolute; right: 9000px; } /*Check box*/ input[type="checkbox"] + .label-text:before{ content: "\f096"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing:antialiased; width: 1em; display: inline-block; margin-right: 5px; } input[type="checkbox"]:checked + .label-text:before{ content: "\f14a"; color: #2980b9; animation: effect 250ms ease-in; } input[type="checkbox"]:disabled + .label-text{ color: #aaa; } input[type="checkbox"]:disabled + .label-text:before{ content: "\f0c8"; color: #ccc; } /*Radio box*/ input[type="radio"] + .label-text:before{ content: "\f10c"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing:antialiased; width: 1em; display: inline-block; margin-right: 5px; } input[type="radio"]:checked + .label-text:before{ content: "\f192"; color: #8e44ad; animation: effect 250ms ease-in; } input[type="radio"]:disabled + .label-text{ color: #aaa; } input[type="radio"]:disabled + .label-text:before{ content: "\f111"; color: #ccc; } /*Radio Toggle*/ .toggle input[type="radio"] + .label-text:before{ content: "\f204"; font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing:antialiased; width: 1em; display: inline-block; margin-right: 10px; } .toggle input[type="radio"]:checked + .label-text:before{ content: "\f205"; color: #16a085; animation: effect 250ms ease-in; } .toggle input[type="radio"]:disabled + .label-text{ color: #aaa; } .toggle input[type="radio"]:disabled + .label-text:before{ content: "\f204"; color: #ccc; } @keyframes effect{ 0%{transform: scale(0);} 25%{transform: scale(1.3);} 75%{transform: scale(1.4);} 100%{transform: scale(1);} }

Related: See More


Questions / Comments: