C# Corner FAQ Integration in Web Application Using IntroJS

Introduction

This article covers how to use Intro JS in our web application.

Please see this article in my blog: http://sibeeshpassion.com/using-introjs.html

Background

We all are familiar with the C# Corner FAQ. So I thought of integrating the FAQ with Intro JS. I hope you will like it :).

Using the code

To start we need to download the intro js plugin and the necessary files. Please download those from here.

Now after downloading, extract the files. You can see many files there. From that select the necessary files alone for now.

bootstrap-responsive.min.css
bootstrap.min.css
demo.css
introjs.css
intro.js

Now include all the preceding files to our website and create a web page as well. So the next step is to include the files in our web page (in this case Default.aspx).

<link href="bootstrap.min.css" rel="stylesheet" />
<link href="demo.css" rel="stylesheet" />
<link href="bootstrap-responsive.min.css" rel="stylesheet" />
<link href="introjs.css" rel="stylesheet" />

So now to identify what exactly are the basics of this plug. For example I have given a UI element as:

<p class="lead" data-step="2" data-intro="Another step.">

In this you can see data-step="2", what does it mean? It means this element must be fired second :) You can see more UI elements with this data-step attribute in DefaultCCorner.aspx.

And to make our page more responsive I have added the following images from the C# corner page.

1.png
2.png
3.png
4.png
5.png
6.png
7.png

After all these steps, this is how our page looks.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How you can write code project article</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="demo.css" rel="stylesheet" />
<link href="bootstrap-responsive.min.css" rel="stylesheet" />
<link href="introjs.css" rel="stylesheet" />
</head>
<body>
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right" data-step="9" data-intro="Get it, use it.">
<img src="9.png" />
</ul>
</div>
<hr>
<div class="jumbotron">
<h1 data-step="1" data-intro="This is a tooltip!">What is C# corner? </h1>
<p class="lead" data-step="2" data-intro="Another step.">
Started in 2000 as a hobby, C# Corner is an absolutely FREE online social community for IT Developers and Professionals to exchange their knowledge and experience by teaching and learning from one another by using various interactive online methods such as contributing articles, discussion forums, blogs, and videos. Today, C# Corner and Mindcracker network reach over 3+ million monthly users.
</p>
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how I can write an article!.</a>
</div>
<hr>
<div class="span6" data-step="5" data-intro="More And More." data-position='left'>
<h4>Step 3: Article contents</h4>
<p>
<img src="3.png" />
</p>
</div>
<div class="row-fluid marketing">
<div class="span6" data-step="3" data-intro="Ok, wasn't that fun?" data-position='right'>
<h4>Step 1: Submit an article</h4>
<p>
<img src="1.png" />
</p>
</div>
<div class="span6" data-step="7" data-intro="Still More." data-position='left'>
<h4>Step 5: Done</h4>
<p>
<img src="5.png" />
</p>
</div>
<div class="span6" data-step="4" data-intro="More features, more fun." data-position='left'>
<h4>Step 2: Agree</h4>
<p>
<img src="2.png" />
</p>
</div>
<div class="span6" data-step="6" data-intro="Still More." data-position='left'>
<h4>Step 6: Author’s Article </h4>
<p>
<img src="6.png" />
</p> </div>
<div class="span6" data-step="8" data-intro="Still More." data-position='left'>
<h4>Step 7: Author’s Article: Under review</h4>
<p>
<img src="7.png" />
</p>
</div>
<div class="span6" data-step="9" data-intro="Still More." data-position='left'>
<h4>Step 8: Sign Up</h4>
<p>
<img src="8.png" />
</p>
</div>
</div>
<hr>
</div>
<script type="text/javascript" src="intro.js"></script>
</body>
</html>

Thank you for reading :)

Output: What is C# Corner?

See more here: http://usablica.github.io/intro.js/

History

First Version: 12-11-2014

5 Comments

Join the conversation! Your thoughts help the community grow.

Sibeesh Venu11y ago
Keyur Patel Ok Ok thank you :)
Keyur Patel11y ago
Sibeesh Venu I can see output your image clearly but i am expecting same link with real output means we can see step by step FAQ of c-sharp corner on that link. Don't worry about image. Nice efforts.
Sibeesh Venu11y ago
"Is it possible for you to publish your output somewhere for time being?" Can you please elaborate it? I could not understand it buddy .
Sibeesh Venu11y ago
Keyur Patel Hi thanks a lot. I have given the output in that image. But i don't know why it is not showing (or embedded ) in the article itself. May be i need to contact support.
Keyur Patel11y ago
Awesome. Is it possible for you to publish your output somewhere for time being? without understanding of IntoJs concept, it might not understand output of your sample article. By the way , you have taken good example.