Template Type 1
MCQ Template
Why we should use this template for basic mcq or short question ?
- It is easy to use .
- It can easily understand by the user.
- You can simply copy this syntax and use it in your MDX file and it will work but only if you host it on our website.
- All the above points are true.
Answer
4. All the above points are true.
Syntax of the above template
Simply copy the code and paste it in your MDX document and it will work.
Make sure you have hosted your writing on our website.
In the below code you can see a highlighted line 7,11-14,22 where you have to change the content according to your need.
if you want to modify the color, font, size of the text then you can do it easily that I'll explain in the Syntax Breakdown section.
import { Features, Feature } from '@components/features';//use this import only once in the file
<Feature id="highlighting-card">
<h1 className="font-sans text-yellow-300 text-xl ">
---- Question ----
</h1>
1. ---- Option 1 ----
2. ---- Option 2 ----
3. ---- Option 3 ----
4. ---- Option 4 ----
</Feature>
<details class= "font-bold pt-4">
<summary>Answer</summary>
<p class="font-bold">
---- Answer ----
</p>
</details>
// This is the line which will create a line between the questions.
<div class ="m-10" style={{ border:"solid #483861" , opacity: "0.5", borderRadius: "20px"} }> </div>
Template Type 2
MCQ Template
Why we should use this template for basic mcq or short question ?
function codeXAM() {
console.log(template)
console.log(no)
var template = 'Type'
let no = 2
}
codeXAM()💡 Answer
4: All the above points are true.
Syntax of the above template
Simply copy the code and paste it in your MDX document and it will work.
Make sure you have hosted your writing on our website.
In the below code you can see a highlighted line 9,13,16,22,28,34 ,46-50,64,68 where you have to change the content according to your need.
if you want to modify the color, font, size of the text then you can do it easily that I'll explain in the Syntax Breakdown section.
import { Features, Feature } from '@components/features'; //use this import only once in the file
import Question from "@components/mcqtype2/Question"; //use this import only once in the file
import Answer from "@components/mcqtype2/Answer"; //use this import only once in the file
<Feature id="highlighting-card">
<h1 className="font-sans text-yellow-300 text-xl ">
---- Question ----
</h1>
<Question render={
<Answer answer="4"> 👈you can use abcd also if you number is in the form of a,b,c,d
<Answer.Option>
1. ---- Option 1 ----
</Answer.Option>
<Answer.Option>
2. ---- Option 2 ----
</Answer.Option>
<Answer.Option>
3. ---- Option 3 ----
</Answer.Option>
<Answer.Option>
4. ---- Option 4 ----
</Answer.Option>
</Answer>
}>
```javascript 👈This is the line which will create code block
Code{
---- Line 1 ...this ----
---- Line 2 ...is ----
---- Line 3 ...the ----
---- Line 4 ...code ----
---- Line 5 ...block ----
}
```
</Question>
</Feature>
<details>
<summary>
<b>
💡Answer
</b>
</summary>
4. ---- Option 4 ----
</details>
// This is the line which will create a line between the questions.
<div class ="m-10" style={{ border:"solid #483861" , opacity: "0.5", borderRadius: "20px"} }> </div>
Syntax Breakdown
Text Color Change
Assuming that you want to change the color of the question.
- You can change the color of the text by changing the
text-yellow-300totext-red-300or any other color you want.
Example
<h1 className="text-yellow-300"> CodeXam </h1>Preview
CodeXam
<h1 className="text-red-300"> CodeXam </h1>Preview
CodeXam
<h1 className="text-green-300 "> CodeXam </h1>Preview
CodeXam
<h1 className="text-blue-300 "> CodeXam </h1>Preview
CodeXam
<h1 className="text-purple-300 "> CodeXam </h1>Preview
CodeXam
Know more color
for more colors you can visit tailwindcss (opens in a new tab)
Text Size Change
Assuming that you want to change the size of the question.
- You can change the size of the text by changing the
text-xltotext-2xlor any other size you want.
Example
<h1 className="text-xl"> CodeXam </h1>Preview
CodeXam
<h1 className="text-2xl"> CodeXam </h1>Preview
CodeXam
<h1 className="text-3xl"> CodeXam </h1>Preview
CodeXam
<h1 className="text-4xl"> CodeXam </h1>Preview
CodeXam
<h1 className="text-5xl"> CodeXam </h1>Preview
CodeXam
Know more size
for more sizes you can visit tailwindcss (opens in a new tab)
