Quiz Club, NIT Warangal

Theme used : Creative, a one page creative theme for Bootstrap created by Start Bootstrap.

Getting Started

Look over the file directory to get yourself familiarised with the structure followed. All assets are organised as per the usage.

Installing Git

Follow steps here

Learning Git

Wiki on Git You can learn Git using any of the following links:

Codecademy, try.github.io, Atlassian, the simple guide, GitHub's Guide or by checking out a video

Here's a short recap of the important and most commonly commands:

Git Cheatsheet

Cloning a repo : git clone [repo-url-here]
Initialising a local repo : git init
Check status : git status
Add or stage a file : git add [file]
Add or stage everything in the present directory : git add .
Unstage or reset a file : git reset [file]
Commit : git commit -m "[commit-message]"
Push repo : git push

Before beginning

You'll have to config your git settings from the command line in order to be able to clone/ push/ pull anything. (Proxy sucks)

For first time configuration

Open Git Bash (type bash in App search)

    $ git config --global user.name "your-name-here"
    $ git config --global user.email "github-email-id-here"

Use git with proxy server

  $ git config --global http.proxy http://172.30.0.16:3128
  $ git config --global https.proxy https://172.30.0.16:3128

Use git without proxy server

  $ git config --global --unset http.proxy
  $ git config --global --unset https.proxy

Fork this repo, then clone it onto your system, change directory, fire up your favorite text editor and open `index.html`

Suggestions for text editor:

Sublime Text 3 : The go-to text editor. Coded in C++ and Python, there is no match for its speed.

Atom : GitHub's very own text editor, coded in Coffeescript (a flavour of JavaScript), LESS(a CSS preprocessor) and HTML. This one is a bit more git oriented.

Brackets : A text editor by Adobe coded in HTML, CSS and JS, this one is the only one with live-preview capability built in; a boon if you're looking towards front-end development.

Adding a new Quiz

Adding the Quiz Thumbnail

When replacing the variables such as <- QuizName ->, remove the <- and ->

Where to add: Ctrl + F > QuizModal + Thumbnail

Create thumbnail using Paint/ Paint.net/ Photoshop.
Make sure the dimensions of the thumbnail are exactly 650 x 350 or in the same ratio.
Save the thumbnail as QuizName_Year for legibility. Use suitable extension.

Use the template given below:

<div class="col-lg-4 col-sm-6">
  <a href="#<- QuizName ->Modal" data-toggle="modal" class="portfolio-box">
    <img src="img/Quizzes/<- Quiz-Thumbnail-File-Name.extension ->" class="img-responsive" alt="">
    <div class="portfolio-box-caption">
      <div class="portfolio-box-caption-content">
        <div class="project-name">
          <span class="trajanPro"><- QuizName -></span>
        </div>
      </div>
    </div>
  </a>
</div>

Things to note:

<- QuizName -> needs to be the same in the above and below code blocks.

Replace Quiz-Thumbnail-File-Name.extension with the filename saved in step 3

<div id="<- QuizName ->Modal" class="modal fade" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content bg-dark">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title trajanPro text-center" style="font-size: 58px"><- QuizName -></h4>
       </div>
       <div class="modal-body container text-center trajanPro noUnderline">
       <!-- If multiple PPTs for multiple rounds (Prelims, Pounce, etc.), reiterate the below code block (the `a` and `p` tags) -->
         <a href="#<- QuizName -><- Round ->Modal" data-toggle="modal" class="text-center quiz_link" style="font-size: 44px"><- Round -></a> <!-- if single PPT, replace <- Round -> with any keyword, eg: All; which makes the href="#TharakQuizAllModal" -->
         <p class="monospace"></p> <!-- if any "subtitles" -->
      </div>
    </div>
  </div>
</div>

Things to note:

<- QuizName -> needs to be the same in the above two code blocks.

#<- QuizName -><- Round ->Modal -> please note down for use in quizzes.js

Create PPT in Google Slides, then save the PPT in this Drive folder. (Request access)
Publish the PPT by opening it up, File > Publish to the Web > Publish (link mode)
Copy the link. It's gonna look something like this: https://docs.google.com/presentation/d/1-4wVOslPm-mhHm3lpxPXeQijszeqm7K3TYfBmYGSJ_E/pub?start=false&loop=false&delayms=3000 Remember this link for step 11
Head over to js/quizzes.js

Find the following line

/*
Append Quiz embed links above here
*/

Remember the #<- QuizName -><- Round ->Modal used in step 4.2?

Add a new key:value pair as follows:

<- QuizName -><- Round ->Modal : '<- link from **step 7** ->',

And that's it! You should be good to go.

agdhruv/qcnitw