How to Make a Html Quiz Multiple Choice With Continue and Exit Button

How we can create a true/false or multiple-choice questions quiz program using JS or any JS library? Solution: See this jQuery Quiz Program With Multiple Choice Questions, Create a Quiz.

Earlier I have shared a JavaScript Quiz Program, but this is a dynamic quiz program using jQuery. Basically, we use a quiz program to test our student's or visitors' skills. There are many websites, which are only for online quizzes. A typical online quiz contains questions and answers options, like multiple-choice questions. There mostly quiz websites are based on CMS like WordPress and they have plugins for creating a quiz. But we can create a quiz using JavaScript or any JavaScript library.

Today you will learn to create a quiz program using jQuery. Basically, there are 8 questions with 2 options answers like true/false or yes/no. On the left side, there is a vertical progress bar for showing you many questions you attended. When you give answers to all the questions, then the submit button will visible. After clicking the submit button, you can see your score and how many right or wrong answers you selected.

So, Today I am sharing the jQuery Quiz Program With Multiple Choice Questions. There I have used HTML for creating the layout and put question/answers, CSS for styling, and jQuery for functioning. You can use this program to create a quiz on your website, after some modifications like questions and answers.

If you are thinking now how this quiz program actually is, then see the preview given below.

Preview Of Create a Quiz

See this video preview to getting an idea of how this multiple choice question-answer looks like.

Live Demo

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

jQuery Quiz Program With Multiple Choice Questions Source Code

Before sharing source code, let's talk about it. First I have created a header and the main div named wrap. Inside the main div, I have placed all question/answer sections and the progress bar div. Each quiz section contains 2 divs, one for the question and one for the answer. There I have used HTML Data-* attribute to store the answer in the array.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave values like size, position, margin, padding, etc to all the elements. There I have used CSS :before and :after commands to creating some elements. I have styled answer options which are based on inputs using input [ type = "radio" ] selector. Also, there are many things I have done using CSS.

jQuery handling here all functions of the program. There I have used JS if { } else { } statements and used for { } loop to execute functions. After that, I have declared the answers in array. Left all other things you will understand after getting the codes, I can't explain all in writing. For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript.

Follow the steps to creating this program without any error.

index.html

Create an HTML file named ' index.html ' and put these codes given below.

<!DOCTYPE html>

<head>

<title> jQuery Quiz Program | Webdevtrick.com </title>

</head>

<body>

<small> Multiple Choice Quiz | jQuery </small>

</header>

<div class = "question" > Are CSS property names case-sensitive? <br> Ex: <code> baCkgRouNd: #333; </code> </div>

</div>

</section>

<div class = "question" > Does setting <code> margin-top: </code> and <code> margin-bottom: </code> have an affect on an inline element? </div>

</div>

</section>

</div>

<div class = "question" > The <code> translate() </code> function can move the position of an element on the z-axis. </div>

</div>

</section>

<div class = "question" > The pseudo class <code> :checked </code> will select inputs with type radio or checkbox, but not option elements. </div>

</div>

</section>

</div>

<div class = "question" > Does setting <code> padding-top: </code> and <code> padding-bottom: </code> on an inline element add to its dimensions? </div>

</div>

</section>

<div class = "question" > If you have a <code> p </code> element with <code> font-size: 10rem; </code> , will the text be responsive when the user resizes / drags the browser window? </div>

</div>

</section>

</div>

<div class = "question" > In a HTML document, the pseudo class <code> :root </code> always refers to the html element. </div>

</div>

</section>

<div class = "question" > The formula context/target = result is useful when building responsive layouts. </div>

</div>

</section>

</div>

<button id = "emc-submit" > Submit Answers </button>

</div>

</footer>

</body>

</html>

style.css

Now create a CSS file named ' style.css ' and put these codes given here.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@charset "UTF-8";

@import url("https://fonts.googleapis.com/css?family=Raleway:400,800");

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

.row:after {

clear : both ;

content : "" ;

display : table ;

}

.row:before {

content : "" ;

display : table ;

}

*, *:after, *:before {

-webkit-box-sizing : border-box ;

-moz-box-sizing : border-box ;

box-sizing : border-box ;

}

body {

background : #fff ;

font-family : 'Raleway' ;

line-height : 1.55 ;

color : #737373 ;

font-weight : 400 ;

}

body a {

color : #27b198 ;

text-decoration : none ;

border-bottom : 2px solid #fff ;

}

body a:hover {

border-color : #eeeeee ;

}

code {

background : #fff ;

color : #999999 ;

padding : 2px 8px ;

}

header {

position : relative ;

text-align : center ;

text-transform : uppercase ;

color : #ff5c00 ;

border-bottom : 1px solid dareken ( #2dceb1, 15% ) ;

letter-spacing : 4px ;

padding : 12px 0 ;

background : #fafafa ;

border-bottom : 1px solid #eeeeee ;

}

.wrap {

max-width : 48em ;

margin : 0 auto ;

padding : 2.5em 0 4em ;

}

.row.last {

border-bottom : 1px solid #eeeeee ;

}

section {

position : relative ;

padding : 30px 20px ;

width : 50% ;

min-height : 12em ;

float : left ;

background : #fafafa ;

border-top : 1px solid #eeeeee ;

border-left : 1px solid #eeeeee ;

}

section:nth-child(even) {

border-right : 1px solid #eeeeee ;

}

section.item-incorrect {

background : #f6f6f6 ;

}

section.item-incorrect:before {

position : absolute ;

z-index : 399 ;

bottom : 0 ;

right : 0 ;

content : "" ;

height : 0 ;

width : 0 ;

border : 35px solid ;

border-color : transparent #ff5c61 #ff5c61 transparent ;

}

section.item-incorrect:after {

line-height : 1.4 ;

position : absolute ;

z-index : 499 ;

font-family : 'fontawesome' ;

content : "" ;

bottom : 0 ;

right : 7px ;

font-size : 1.9em ;

color : #ff383e ;

}

section.item-correct:before {

position : absolute ;

z-index : 399 ;

bottom : 0 ;

right : 0 ;

content : "" ;

height : 0 ;

width : 0 ;

border : 35px solid ;

border-color : transparent #48d7bd #48d7bd transparent ;

}

section.item-correct:after {

line-height : 1.4 ;

position : absolute ;

z-index : 499 ;

font-family : 'fontawesome' ;

content : "" ;

bottom : 0 ;

right : 7px ;

font-size : 1.9em ;

color : #2dceb1 ;

}

input[type="radio"] {

position : absolute ;

visibility : hidden ;

}

input[type="radio"] + label {

background : #fff ;

display : inline-block ;

padding : 5px 15px ;

margin : 5px 10px 5px 0 ;

border : 1px solid #eeeeee ;

-webkit-transition : all 0.1s linear ;

-moz-transition : all 0.1s linear ;

transition : all 0.1s linear ;

}

input[type="radio"] + label:before {

content : "\f10c" ;

font-family : 'fontawesome' ;

margin-right : 7px ;

color : #ff5c00 ;

}

input[type="radio"] + label:hover {

cursor : pointer ;

}

input[type="radio"]:checked + label {

background : #fd9d08 ;

color : #ff5c00 ;

}

input[type="radio"]:checked + label:before {

content : "\f192" ;

color : #ff5c00 ;

}

.question {

font-weight : bold ;

}

.submit {

padding : 20px 5px ;

}

.submit button {

display : block ;

outline : none ;

width : 300px ;

margin : 1em auto 1.5em ;

padding : .8em 1em ;

background : #f8f8f8 ;

color : gainsboro ;

text-transform : uppercase ;

letter-spacing : 3px ;

border : 1px solid #eeeeee ;

}

#emc-score {

text-align : center ;

opacity : 0 ;

padding : 0 ;

-webkit-transition : all 0.55s ease ;

-moz-transition : all 0.55s ease ;

transition : all 0.55s ease ;

}

#emc-score.new-score {

opacity : 1 ;

background : #2dceb1 ;

color : #fbfbfb ;

padding : 20px ;

}

#emc-submit {

position : relative ;

-webkit-transition : all 0.33s ease ;

-moz-transition : all 0.33s ease ;

transition : all 0.33s ease ;

}

#emc-submit.ready-show {

background : #ff8000 ;

color : #fff ;

border : none ;

border-bottom : 2px solid #ff5c00 ;

box-shadow : 0 1px 1px rgba ( 68, 68, 68, 0.2 ) ;

-webkit-transform : rotateX ( 360deg ) ;

-moz-transform : rotateX ( 360deg ) ;

-ms-transform : rotateX ( 360deg ) ;

-o-transform : rotateX ( 360deg ) ;

transform : rotateX ( 360deg ) ;

}

#emc-submit.ready-show:hover {

color : #fbfbfb ;

background : #ff5c00 ;

border-color : #ff5c00 ;

}

#emc-submit.ready-show:active {

top : 2px ;

border-bottom : none ;

}

#emc-progress {

height : 100% ;

border : 1px solid #ff8000 ;

background : #fd9d08 ;

}

#emc-progress_inner {

width : 100% ;

height : 0 ;

background : #ff5c00 ;

-webkit-transition : height 0.33s cubic-bezier ( 0.68, -0.55, 0.265, 1.55 ) ;

-moz-transition : height 0.33s cubic-bezier ( 0.68, -0.55, 0.265, 1.55 ) ;

transition : height 0.33s cubic-bezier ( 0.68, -0.55, 0.265, 1.55 ) ;

}

#emc-progress_ind {

position : absolute ;

display : block ;

width : 100% ;

font-size : .7em ;

font-weight : bold ;

padding : 7px 5px 5px ;

top : 0 ;

left : 0 ;

text-align : center ;

color : #ff5c00 ;

}

footer {

position : fixed ;

width : 40px ;

height : 100% ;

background : rgba ( 251, 251, 251, 0.85 ) ;

bottom : 0 ;

left : 0 ;

padding : 25px 12px 10px ;

}

.attrib {

padding : 10px 0 ;

text-align : center ;

}

.attrib i {

margin-right : 7px ;

margin-left : 7px ;

}

function.js

The final step, create a JavaScript file named ' function.js ' and put the codes.

100

101

// Code By Webdevtrick ( https://webdevtrick.com )

( function ( $ ) {

$ . fn . emc = function ( options ) {

var defaults = {

key : [ ] ,

scoring : "normal" ,

progress : true

} ,

settings = $ . extend ( defaults , options ) ,

$ quizItems = $ ( '[data-quiz-item]' ) ,

$ choices = $ ( '[data-choices]' ) ,

itemCount = $ quizItems . length ,

chosen = [ ] ,

$ option = null ,

$ label = null ;

emcInit ( ) ;

if ( settings . progress ) {

var $ bar = $ ( '#emc-progress' ) ,

$ inner = $ ( '<div id="emc-progress_inner"></div>' ) ,

$ perc = $ ( '<span id="emc-progress_ind">0/' + itemCount + '</span>' ) ;

$ bar . append ( $ inner ) . prepend ( $ perc ) ;

}

function emcInit ( ) {

$ quizItems . each ( function ( index , value ) {

var $ this = $ ( this ) ,

$ choiceEl = $ this . find ( '.choices' ) ,

choices = $ choiceEl . data ( 'choices' ) ;

for ( var i = 0 ; i < choices . length ; i ++ ) {

$ option = $ ( '<input name="' + index + '" id="' + index + '_' + i + '" type="radio">' ) ;

$ label = $ ( '<label for="' + index + '_' + i + '">' + choices [ i ] + '</label>' ) ;

$ choiceEl . append ( $ option ) . append ( $ label ) ;

$ option . on ( 'change' , function ( ) {

return getChosen ( ) ;

} ) ;

}

} ) ;

}

function getChosen ( ) {

chosen = [ ] ;

$ choices . each ( function ( ) {

var $ inputs = $ ( this ) . find ( 'input[type="radio"]' ) ;

$ inputs . each ( function ( index , value ) {

if ( $ ( this ) . is ( ':checked' ) ) {

chosen . push ( index + 1 ) ;

}

} ) ;

getProgress ( ) ;

}

function getProgress ( ) {

var prog = ( chosen . length / itemCount ) * 100 + "%" ,

$ submit = $ ( '#emc-submit' ) ;

if ( settings . progress ) {

$ perc . text ( chosen . length + '/' + itemCount ) ;

$ inner . css ( { height : prog } ) ;

}

if ( chosen . length === itemCount ) {

$ submit . addClass ( 'ready-show' ) ;

$ submit . click ( function ( ) {

return scoreNormal ( ) ;

} ) ;

}

function scoreNormal ( ) {

var wrong = [ ] ,

score = null ,

$ scoreEl = $ ( '#emc-score' ) ;

for ( var i = 0 ; i < itemCount ; i ++ ) {

if ( chosen [ i ] != settings . key [ i ] ) {

wrong . push ( i ) ;

}

$ quizItems . each ( function ( index ) {

var $ this = $ ( this ) ;

if ( $ . inArray ( index , wrong ) !== - 1 ) {

$ this . removeClass ( 'item-correct' ) . addClass ( 'item-incorrect' ) ;

} else {

$ this . removeClass ( 'item-incorrect' ) . addClass ( 'item-correct' ) ;

}

} ) ;

score = ( ( itemCount - wrong . length ) / itemCount ) . toFixed ( 2 ) * 100 + "%" ;

$ scoreEl . text ( "You scored a " + score ) . addClass ( 'new-score' ) ;

$ ( 'html,body' ) . animate ( { scrollTop : 0 } , 50 ) ;

}

} ( jQuery ) ) ;

$ ( document ) . emc ( {

key : [ "2" , "1" , "2" , "2" , "2" , "2" , "1" , "1" ]

} ) ;

That's It. Now you have successfully created the jQuery Quiz Program With Multiple Choice Questions, Create a Quiz. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

franklinthemblent.blogspot.com

Source: https://webdevtrick.com/jquery-quiz-program/

How to Make a Html Quiz Multiple Choice With Continue and Exit Button

Preview Of Create a Quiz

jQuery Quiz Program With Multiple Choice Questions Source Code

0 Response to "How to Make a Html Quiz Multiple Choice With Continue and Exit Button"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel