Quiz Shortcode

gotmaester · Member · Dec 9, 2017 at 9:43 pm

I adapted the quiz shortcode for another purpose than a quiz. As shown on page below. (ie. CNA/EWTN Article) which expands.

https://ewtn.blog/2017/12/08/friday-12-08-17/

I have included the CSS code which I used to make this happen.

QUESTION: Is there a way to “resurrect” the original quiz code (now I think I might want to use this feature the way it was intended), BUT at the same time keep my adaptations? In other words, could I create a special div class, and put all of this code in it. Then put the quiz shortcode within the special div class?

Here is the code I used to create the expanding lines of text on the front page.

div.quiz div.answer.last {
	margin-top: -0;
}

div.quiz {
	border: 0 solid #044977 !important;
	border-left: 0 solid #233488 !important;
	border-bottom: 1px solid #ddd !important;
	background: #f9f9f9;
	padding: 0 !important;
}

div.quiz a, div.quiz a:visited {
	color: #0b29b9;
}

div.quiz strong {
	font-size: 125%;
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #aaa;
}

.answer {
	color: #0b29b9;
	font-weight: 600;
}

div.answer.wrong {
	color: black !important;
	font-weight: 600;
}

div.quiz div.answer {
	padding: .5em 2em .5em 2.5em !important;
}

div.quiz div.answer.correct div.explanation, div.quiz div.answer.wrong div.explanation {
	display: block;
	color: black;
	margin-top: .7em !important;
	margin-bottom: .7em;
	line-height: 1.3;
	font-weight: 100;
}

The blog I need help with is: (visible only to logged in users)

gotmaester · Member · Dec 9, 2017 at 10:01 pm

I think I am on the right track. But PLEASE, I need someone to check over what I am doing so I don’t run into any problems that I do not foresee.

Here is what I think will work.

FIRST, in the CSS I will add the following:

.expand {
}

SECOND, I will then add .expand before everything .div in the code above, as follows

div.quiz div.answer.last {
	margin-top: -0;
}

div.quiz {
	border: 0 solid #044977 !important;
	border-left: 0 solid #233488 !important;
	border-bottom: 1px solid #ddd !important;
	background: #f9f9f9;
	padding: 0 !important;
}

div.quiz a, div.quiz a:visited {
	color: #0b29b9;
}

div.quiz strong {
	font-size: 125%;
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #aaa;
}

.answer {
	color: #0b29b9;
	font-weight: 600;
}

div.answer.wrong {
	color: black !important;
	font-weight: 600;
}

div.quiz div.answer {
	padding: .5em 2em .5em 2.5em !important;
}

div.quiz div.answer.correct div.explanation, div.quiz div.answer.wrong div.explanation {
	display: block;
	color: black;
	margin-top: .7em !important;
	margin-bottom: .7em;
	line-height: 1.3;
	font-weight: 100;
}

THIRD, once I have done that, then anywhere I want to have the line of text where CNA/EWTN is, I mark that quiz shortcode beforehand with

<div class="expand">

and after the quiz shortcode

</div>

FOURTH, anytime I want to create a quiz, then I could just use the quiz shortcode, and it will be at the default settings, because I created a special class of .expand div quiz selectors above.

Does this make sense? Can someone check the code for me. I would really appreciate it.

gotmaester · Member · Dec 9, 2017 at 11:57 pm
Copy link
UPDATE:

Things at first appeared as if they were working. You can compare the two pieces of Quiz shortcode

1. https://ewtn.blog/2017/12/08/friday-12-08-17/

–on this page you can find the CNA/EWTN headings (which expand) — which the above code renders

2. https://ewtn.blog/2017/12/08/swedens-catholic-cardinal-on-his-first-six-months-in-office/

–on this page you can find the QUIZ — with default settings.

THE PROBLEM, HOWEVER…

When I try to change the quiz’s “explanation” text size from 90 percent to 110 percent on the second page, this effects the text size on the first page.

This shouldn’t be happening because I thought I separated the two with the .expand div class.

So despite spending the last couple of hours on this, I still need help from someone who knows a whole lot more than I do :)
gotmaester · Member · Dec 10, 2017 at 1:33 am
Copy link
For everyone’s convenience I have put both types of Quiz shortcode on the same page.

https://ewtn.blog/2017/12/08/swedens-catholic-cardinal-on-his-first-six-months-in-office/

Question 1: is an example of the .expand div quiz shortcode
Question 2: is default quiz shortcode
gotmaester · Member · Dec 10, 2017 at 2:17 am
Copy link
ignore the last post. I decided to do another work around and don’t need to incorporate the .expand div quiz shortcode in the same list of questions as the default quiz shortcodes.

For questions, I am going to use the default shortcodes.

So refer back to page https://ewtn.blog/2017/12/08/friday-12-08-17/
for the .expand div quiz shortcodes.

Whew! this is getting complicated.
gotmaester · Member · Dec 10, 2017 at 3:10 am
Copy link
HOORAY! I was just about ready to give up and then realized that one of the things I was doing wrong was that when I went in and added the .expand before the .div’s, its only to the first one, or a .div folllowing a comma, NOT ALL.

So here is my revised code. It seems to be working. But please check.

This is for the default quiz shortcut codes:

div.quiz {
border: none !important;
background-color: white !important;
margin-bottom: 1em !important;
}

div.quiz div.question {
color: #0b29b9 !important;
}

These are for the special .expand class quiz shortcodes:

.expand {
}

.expand div.quiz div.answer.wrong {
color: black !important;
}
}

.expand div.quiz div.answer.last {
margin-top: -0;
}

.expand div.quiz {
border: 0 solid #044977 !important;
border-left: 0 solid #233488 !important;
background: white;
padding: 0 !important;
}

.expand div.quiz a, .expand div.quiz a:visited {
color: #0b29b9;
}

.expand div.quiz strong {
font-size: 125%;
display: block;
margin-bottom: 10px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #aaa;
}

.expand div.answer {
color: #0b29b9;
font-weight: 600;
}

.expand div.explanation {
color: black !important;
font-weight: 100;
font-size: 90%;
}

.expand div.quiz div.answer {
padding: .5em 2em .5em 2.5em !important;
}

.expand div.quiz div.answer.correct div.explanation, .expand div.quiz div.answer.wrong div.explanation {
display: block;
color: black;
margin-top: .7em !important;
margin-bottom: .7em;
line-height: 1.3;
font-weight: 100;
}

TOTAL TIME SPENT TRYING TO FIGURE THIS OUT: 6 hours!!!!
If I knew what I was doing, it probably would only take half an hour!

gotmaester · Member · Dec 10, 2017 at 5:12 am

Still at it, making some more tweaks. I think everything looks pretty good. But PLEASE if someone can check it over.

Here are the CSS changes for the quiz shortcode for the short answer and multiple choice quiz found at

https://ewtn.blog/2017/12/08/friday-12-08-17/

div.quiz {
	border: none !important;
	color: black;
	background-color: white !important;
	margin-bottom: 5px !important;
	margin-left: -20px;
}

div.quiz div.question {
	color: #0b29b9 !important;
	font-size: 115%;
}

div.quiz div.answer {
	font-size: 100%;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc !important;
	background-color: #f9f9f9;
	margin-bottom:15px!important;
	padding-bottom: 1em !important;
}

Here are the CSS changes for the same WP quiz shortcode put into an .expand div class for the CNA/EWTN expanding headlines at

https://ewtn.blog/2017/12/08/friday-12-08-17/

.expand {
}

.expand div.quiz div.answer.wrong {
	color: black !important;
}
}

.expand div.quiz div.answer.last {
	margin-top: -0;
}

.expand div.quiz {
	border: 0 solid #044977 !important;
	border-left: 0 solid #233488 !important;
	padding: 0 !important;
	background-color: #eee !important;
	margin-left: 0;
}

.expand div.quiz a, .expand div.quiz a:visited {
	color: #0b29b9;
}

.expand div.quiz strong {
	font-size: 125%;
	display: block;
	margin-bottom: 10px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #aaa;
}

.expand div.answer {
	color: #0b29b9;
	font-weight: 600;
}

.expand div.explanation {
	color: black !important;
	font-weight: 100;
	font-size: 90%;
}

.expand div.quiz div.answer {
	padding: .5em 2em .5em 2.5em !important;
}

.expand div.quiz  div.answer.correct  div.explanation, .expand div.quiz div.answer.wrong  div.explanation {
	display: block;
	color: black;
	margin-top: .7em !important;
	margin-bottom: .7em;
	line-height: 1.3;
	font-weight: 100;
}

gotmaester · Member · Dec 10, 2017 at 5:14 am
Copy link
OOPS, the first set of code above should be

Here are the CSS changes for the quiz shortcode for the short answer and multiple choice quiz found at

https://ewtn.blog/2017/12/08/swedens-catholic-cardinal-on-his-first-six-months-in-office/
thesacredpath · Member · Dec 15, 2017 at 12:32 am
Copy link
It all looks good to me.
gotmaester · Member · Dec 15, 2017 at 12:56 am
Copy link
I bought the business plan yesterday, but am disappointed in the quiz plug ins. Several of them are too much work, and really more than I need. So for now the quiz shortcode works well.

Thanks.

The topic ‘Quiz Shortcode’ is closed to new replies.

Quiz Shortcode

Couldn't find what you needed?

Contact us

Browse our guides

Mobile Apps

Social Media